首页

关于

用Sass创建MetaFizzy效果

用Sass创建MetaFizzy效果

Hugo发现了一个绚丽的css效果应用于web中并教会你如何聪明的重建和使用它。两天前,我看见笔者Hugo在css帮助下重写MetaFizzy的效果,Hugo帮助我们找到了一个用于理解Sass的JavaScript源代码。但我认为他的代码仍有可改之处,它比原版本的css多出了许多重复代码,我们找到了一种方法使其更加效率。重点:这是一个实验,如果你想要实验,请使用JavaScriptcss版本需要500个线程,占用很多的CPU。所以这是一个Sass实验,只是为了好玩。

你从哪儿开始

对于这个问题如果一开始没有Hugo的Demo我还不知道从哪儿开始。以下是我们需要做的。给我们的文本一个长长的影子,渐变到黑色。岁颜色的阴影随着时间的变化盘旋,快速的彩虹动画,最后我们需要做以下几点,一个动画光影,一个动画鼠标悬停,一个列表的颜色鼠标悬停差不多就是这样。

平滑阴影

用Sass创建MetaFizzy效果

数据帧

我们会做简单的光影效果,我们做的是让文本阴影颜色逐渐变黑。然后我们需要一个动画,随着时间改变颜色,这个效果需要hsl().因为我们希望Sass代码成为可能。我们将使用一个叫做mixin的关键帧在处理这些文本阴影。首先,纲要。

@mixin…

标签: sass, css, javascript, metafizzy, 效果

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.