共计 4540 个字符,预计需要花费 12 分钟才能阅读完成。
在 CSS 中,存在许多数学函数,这些函数可能通过简略的计算操作来生成某些属性值,例如:
- calc():用于计算任意长度、百分比或数值型数据,并将其作为 CSS 属性值。
- min() 和 max():用于比拟一组数值中的最大值或最小值,也能够与任意长度、百分比或数值型数据一起应用。
- clamp():用于将属性值限度在一个范畴内,反对三个参数:最小值、推荐值和最大值。
在古代 CSS 解决方案:CSS 数学函数一文中,咱们具体介绍了
- calc()
- min()
- max()
- clamp()
四个数学函数。
而本文,将给大家介绍一下最近各大浏览器也逐步开始原生反对的三角函数:
- sin()
- cos()
- tan()
CSS 三角函数语法介绍
首先,咱们来看看 CSS 三角函数的应用形式:
.box {/* 设置元素的宽度为 sin(30deg) 的值 */
width: calc(sin(30deg) * 100px);
/* 设置元素的高度为 cos(45deg) 的值 */
height: calc(cos(45deg) * 100%);
/* 设置元素的透明度为 tan(60deg) 的值 */
opacity: calc(tan(60deg));
}
上述代码中,咱们应用了 calc() 函数进行了计算,而后通过 sin()、cos() 和 tan() 函数对计算结果进行了进一步的解决,从而实现了不同的成果。
须要留神的是,三角函数在 CSS3 中仅对弧度(radian)单位进行反对。如果想要在开发中应用三角函数,能够借助转换函数 deg() 和 rad() 将角度(degree)和弧度进行转换。
CSS3 的这些函数使得开发者能够更加不便解决一些简单的数学问题,加强了 CSS 的表现力。
三角函数的静止轨迹
三角函数的使用,更多的是在动画当中。以正弦、余弦函数为例,其图形如下:
咱们通过一个简略的例子,还原三角函数的图形,以此来感触三角函数的作用。首先,咱们实现一个彩色圆球:
<div class='g-single'></div>
.g-single {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
}
成果如下:
咱们能够通过 transfrom
,借助 CSS @property 属性,来结构一个三角函数的应用场景:
.g-single {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
animation: move 5s infinite ease-in-out;
transform: translate(calc(var(--dis) - 40vw),
calc(5 * sin(var(--angle)) * 1em)
);
}
@keyframes move {
0% {
--dis: 0px;
--angle: 0deg;
}
100% {
--dis: 80vw;
--angle: 1080deg;
}
}
上述的外围在于这一段代码 — transform: translate(calc(var(--dis) - 40vw), calc(5 * sin(var(--angle)) * 1em))
,外部应用了两个 CSS @property 变量:
- x 轴方向是
0px
到80vw
的程度位移动画 - y 轴方向是
5 * sin(0deg) * 1em
到5 * sin(1080deg) * 1em
的竖直动画
通过动画,动静的批改这两个变量的值,咱们就能够失去一个三角函数曲线动画图形:
如果咱们,设定多个截然不同的小球,同一个静止轨迹,设定不同的 animation-delay
,成果会上怎么样呢?
<ul class="g-multi">
<li> </li>
// ... 一共 80 个 li
<li> </li>
</ui>
li {
animation: move 5s infinite ease-in-out;
transform: translate(calc(var(--dis) - 40vw),
calc(5 * sin(var(--angle)) * 1em);
}
@for $i from 1 to $count {li:nth-child(#{$i}) {animation-delay: #{$i * 5 / $count * -1s};
}
}
@keyframes move {
0% {
--dis: 0px;
--angle: 0deg;
}
100% {
--dis: 80vw;
--angle: 1080deg;
}
}
这样,就失去了这么一个动画,十分的相似三角函数动画的曲线:
残缺的代码,你能够戳这里:CodePen Demo — CSS Cos/Sin Math function
疾速实现圆弧轨迹动画
在之前,咱们想实现一个圆弧动画,如下所示,还是略微有点点麻烦的:
有了三角函数之后,相似的动画,能够节俭局部代码实现:
<div></div>
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.g-single {
background: #000;
width: 20px;
height: 20px;
border-radius: 50%;
animation: move 3s infinite linear;
transform: translate(calc(sin(var(--angle)) * 10vmin),
calc(cos(var(--angle)) * 10vmin)
);
}
@keyframes move {
0% {--angle: 0deg;}
100% {--angle: 360deg;}
}
外围就在于 transform: translate(calc(sin(var(--angle)) * 10vmin), calc(cos(var(--angle)) * 10vmin));
,简化一下这段代码,表达式为:
transform: translate(sinX, conX)
,其中 X 为角度变动
如此,咱们只须要动静设置 X 从 0deg
到 360deg
的变动即可,就能够失去一个圆形动画成果:
残缺的代码,你能够戳这里:CodePen Demo — CSS Cos/Sin Math function – arc animation
基于这个技巧,咱们能够尝试实现一个旋转的 Loading 动画,代码也非常简单:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
ul {position: relative;}
li {
position: absolute;
inset: 0;
border-radius: 50%;
animation: move 3s infinite ease-in-out;
transform: translate(calc(sin(var(--angle)) * 60px),
calc(cos(var(--angle)) * 60px)
);
}
@for $i from 1 to 11 {li:nth-child(#{$i}) {animation-delay: #{ $i * -0.15}s;
background: #{hsl(100 + $i * 15, 80%, 60%)};
}
}
@keyframes move {
0% {--angle: 0deg;}
100% {--angle: 360deg;}
}
借助了 SASS 实现了局部重复性代码,外围就是让小圆以不同的速率进行旋转动画,后果如下:
残缺的代码,你能够戳这里:CSS Cos/Sin Math function – Loading animation
尝试应用三角函数实现波浪线
那么,三角函数还有什么作用吗?
咱们来尝试点离奇的,借助三角函数实现曲线(波浪线)。
对 box-shadow
足够理解的同学应该晓得,box-shadow
是反对多重暗影的,借助这个个性,呈现了很多单标签,借助 box-shadow
来绘图的案例。
借助 三角函数、以及box-shadow
是反对多重暗影的这两个个性,咱们就能够利用它们来实现波浪线。
当然,能够还须要借助 SASS 简化手动书写的代码量。咱们来看一个 DEMO:
<div></div>
<div></div>
<div></div>
@function shadowSet($vx, $vy, $color) {
$shadow: 0 0 0 0 $color;
@for $i from 0 through 50 {$x: calc(2 * sin(#{$i * 15 * 1deg}) * #{$vy});
$y: $i * $vy;
$shadow: $shadow, #{$x} #{$y} 0 0 $color;
}
@return $shadow;
}
div {
margin: auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: #f00;
box-shadow: shadowSet(3px, 3px, #f00);
}
div:nth-child(2) {
width: 6px;
height: 6px;
background: #fc0;
box-shadow: shadowSet(3px, 3px, #fc0);
}
div:nth-child(3) {
width: 4px;
height: 4px;
background: #000;
box-shadow: shadowSet(2px, 2px, #000);
}
这样,咱们就能失去 3 条波浪线:
独自看其中一个,其实是这样一坨 box-shadow
代码:
好吧,这个办法的确肯定水平上补救了之前 CSS 无奈无效绘制波浪线的缺点,然而,毛病也非常明显,编译后的代码量太多了!
残缺的代码,你能够戳这里:CSS Cos/Sin Math And box-shadow
曲线创意构想
有了绘制曲线的能力,咱们就能利用它在 CSS 中发明许多有美感、艺术性的成果。
咱们能够尝试应用这些曲线,来制作书签图案:
代码也不简单,我就不贴残缺的代码了,感兴趣的能够戳这里:CodePen Demo – CSS Cos/Sin Math And box-shadow – bookmark
相熟我的读者肯定对 CSS-doodle 不生疏,袁川老师,也就是 CSS-doodle 库的作者,在他的 Codepen 首页背景板中,应用的就是应用了三角函数实现的一副纯 CSS 画作:
Codepen Demo — border-radius
我之前也尝试应用三角函数,实现了一副丑一点的:
Codepen Demo — CSS-Doodle fish 🐟 & seaweed🍀
总结一下
CSS 原生反对的三角函数,给 CSS 关上了更多的可能性。
然而,咱们也必须看到,各种数学函数的减少,导致 CSS 的复杂度也是愈来愈高。CSS 曾经不再是十分纯正的负责款式了,很多时候,很多计算也能够间接在 CSS 当中实现。其中利弊,可能不同的人会有不一样的认识。至于好坏,交给工夫给出答案吧。
好了,本文到此结束,心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github — iCSS,继续更新,欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。