1. 首页
  2. css

CSSSass的亚泡沫效应

下面的帖子是雨果·吉拉德尔写的,他是这里的常客。在盛大的CSS技巧传统中,雨果在网络上发现了一个很酷的效果,并深入研究了如何以一种聪明的方式重新创建它。
几天前,我看到了雨果Darby Brown的这支笔,它打算在Sass的帮助下在纯CSS中重现David DeSandro的元泡沫效果。Hugo做得很好,可能是最重要的一点:深入研究原始JavaScript以了解如何在Sass中实现它。
他成功了,但我认为他的代码可以改进。即使它明显比普通的CSS版本好得多,仍然有很多重复的代码。让我们想办法让它像超级干!
重要!这其实只是一个实验。如果你想做这样的事情,请使用JavaScript。CSS版本需要大约500行长,结果是相当沉重的GPU。所以再一次,这是一个Sass实验。只是为了好玩。我们从哪里开始?
如果雨果不先做他的演示,我就无法回答这个问题。我们需要做的是:
– 给我们的文本一个长长的阴影,逐渐褪色为黑色
– 使阴影的颜色随着时间慢慢改变
– 悬停时,去疯狂的彩虹
– 快速动画化这条彩虹
– 一个平滑阴影的动画
– 一个悬停状态的动画
– 悬停状态的颜色列表
– 水平和垂直偏移都设置为$i * 2px以使阴影越来越大
– 我们不定义任何模糊,但您可以根据需要设置一个
– 颜色在HSL中定义,色调设置为给定参数(36的倍数)+$i * 1,饱和度为100%,亮度为50% – $i,这意味着它逐渐变为黑色

CSSSass的亚泡沫效应 为WP2原创文章,链接:https://www.wp2.cn/css/csssass%e7%9a%84%e4%ba%9a%e6%b3%a1%e6%b2%ab%e6%95%88%e5%ba%94/