css 三角 阴影,CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

@for $i from 0 through 50 {$x: sin($i / 8) * $vx;$y: $i * $vy;

$shadow: $shadow, #{$x} #{$y} 0 0 rgba(0, 0, 0, 1);}

@return $shadow;}

div {width: 1px;height: 1px;background: #000;border-radius: 50%;box-shadow: shadowSet(4px, 1px);}

上面sin($i / 8)，这里除以 8 是为了让整个sin(x) 传入的作用域的取值范围为 [0, 6.25]，当而 sin(x) 的作用域为 [0，2π] 时刚好可以画一条完整的单次曲线。这个 8 是可以根据循环的次数不同而进行调整的。

实际，我们得到的box-shadow如下：

{box-shadow:0 0 0 0 black, 0.4986989335px 1px 0 0 black, 0.989615837px 2px 0 0 black,1.4650901163px 3px 0 0 black, 1.9177021544px 4px 0 0 black, 2.3403890918px 5px 0 0 black,2.7265550401px 6px 0 0 black, 3.0701740089px 7px 0 0 black, 3.3658839392px 8px 0 0 black,3.6090703764px 9px 0 0 black, 3.7959384774px 10px 0 0 black, 3.9235722281px 11px 0 0 black,3.9899799464px 12px 0 0 black, 3.9941253622px 13px 0 0 black, 3.9359437875px 14px 0 0 black,3.8163431264px 15px 0 0 black, 3.6371897073px 16px 0 0 black, 3.4012791593px 17px 0 0 black,3.1122927876px 18px 0 0 black, 2.7747401278px 19px 0 0 black, 2.3938885764px 20px 0 0 black,1.9756811944px 21px 0 0 black, 1.5266439682px 22px 0 0 black, 1.0537839735px 23px 0 0 black,0.5644800322px 24px 0 0 black, 0.0663675689px 25px 0 0 black, -0.4327805381px 26px 0 0 black,-0.9251752496px 27px 0 0 black, -1.4031329108px 28px 0 0 black, -1.8591951521px 29px 0 0 black,-2.286245275px 30px 0 0 black, -2.677619305px 31px 0 0 black, -3.0272099812px 32px 0 0 black,-3.3295620582px 33px 0 0 black, -3.5799574329px 34px 0 0 black, -3.7744887692px 35px 0 0 black,-3.9101204707px 36px 0 0 black, -3.9847360499px 37px 0 0 black, -3.9971711559px 38px 0 0 black,-3.9472317429px 39px 0 0 black, -3.8356970987px 40px 0 0 black, -3.6643076841px 41px 0 0 black,-3.4357379737px 42px 0 0 black, -3.1535547213px 43px 0 0 black, -2.8221613023px 44px 0 0 black,-2.446729px 45px 0 0 black, -2.03311631px 46px 0 0 black, -1.58777752px 47px 0 0 black,-1.1176619928px 48px 0 0 black, -0.630105724px 49px 0 0 black, -0.1327168662px 50px 0 0 black;}

实际得到的图像如下：

CodePen Demo -- sass2sin Line

控制颜色及初始方向

看看上面 Sass 实现的这个方法@function shadowSet($vx, $vy)，其中$vx，$vy用于控制图像的振幅及松散程度，我们再添加一个控制初始方向的$direction，控制阴影层数的

color:

@function shadowSet($vx, $vy, $direction, $count, $color) {$shadow : 0 0 0 0 $color;@for $i from 0 through $count {$x: sin($i / 8) * $vx * $direction;$y: $i * $vy;

$shadow: $shadow, #{$x} #{$y} 0 0 $color;}

@return $shadow;}

.line {width: 1px;height: 1px;margin: 10vh auto;background: #000;border-radius: 50%;box-shadow: shadowSet(4px, 1px, 1, 50, #000);}.reverseline {width: 1px;height: 1px;margin: 10vh auto;background: #000;border-radius: 50%;box-shadow: shadowSet(8px, 2px, -1, 100, red);}

控制颜色

再进一步，我们可以借助 Sass 的各种颜色函数，实现颜色的变化：

@function shadowSetColor($vx, $vy, $direction, $count, $color) {$shadow : 0 0 0 0 $color;@for $i from 0 through $count {

$color: lighten($color, .5);

$x: sin($i / 8) * $vx * $direction;$y: $i * $vy;

$shadow: $shadow, #{$x} #{$y} 0 0 $color;}

@return $shadow;}

.colorline {width: 5px;height: 5px;margin: 10vh auto;background: green;border-radius: 50%;box-shadow: shadowSetColor(8px, 2px, -1, 100, green);}

上面，借助了lighten这个函数，通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色。

当然，Sass 中还有很多其他颜色函数：

adjust-hue(degrees)：通过改变一个颜色的色相值，创建一个新的颜色；

lighten(amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

darken(amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；

saturate(amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色

desaturate(amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；

更多 Sass 颜色函数，可以看看这篇文章：Sass基础——颜色函数

OK，看看这次的效果：

CodePen Demo -- sass2sin Line

在 css-doodle 中使用

OK，前面所有的铺垫都是为了在实际的一些创意想法中去使用它。

在 css-doodle 中，由于是利用 Web Component 特性。在需要三角函数的时候，可以直接使用 Java 提供的 Math 函数，会更加的方便。

Web Components 是一套不同的 Web 技术，允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。

袁川老师，也就是 css-doodle 库的作者，在他的 Codepen 首页背景板中，使用的就是使用上述技巧实现的一副纯 CSS 画作：

Codepen Demo -- border-radius

我也尝试使用这个技巧，做了一副：

Codepen Demo -- CSS-Doodle fish 🐟 & seaweed🍀

最后

有几点，有必要提一下的。

1、为什么一定要使用box-shadow，直接堆叠 div 不行么？

可以，使用多重box-shadow只是因为这样可以更省标签，一个 div 搞定。更甚，愿意折腾，使用多重渐变也是可以的。

2、上述两个 Demo 都是纯 CSS 画出来的吗？

是的。虽然借助了 css-doodle 库，但是本质都是 CSS 代码，只是这个库封装好了很多拿来即用的函数。css-doodle

3、有什么用？

额，有没有用是一个哲学问题。至少我觉得还是挺有意思的。

好了，本文到此结束，希望对你有帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

源自：https://juejin.im/post/5dd746a66fb9a07ab45c3e8d

声明：文章著作权归作者所有，如有侵权，请联系小编删除。返回搜狐，查看更多