您的当前位置:首页正文

使用CSS巧妙地制作背景色渐变动画实例

2020-11-27 来源:骅佗教育

background-size:设置背景图片大小。当取值为百分比时,表示指定背景图片相对背景区的百分比大小。当设置两个参数时,第一个值指定图片的宽度,第二个值指定图片的高度。

通过 background-size: 200% 100% 将图片的宽度设置为两倍背景区的宽度,再通过改变 background-position 的 x 轴初始位置来移动图片,由于背景图设置的大小是背景区的两倍,所以 background-position的移动是由 0 0 -> 100% 0 。最终效果如下:

通过 background-size 模拟渐变动画

既然 background-position 可以,那么另一个 background-size 当然也是不遑多让。与上面的方法类似,只是这次 background-position 辅助 background-size ,CSS 代码如下:

p {
 background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
 background-position: 100% 0;
 animation: bgSize 5s infinite ease-in-out alternate;
}
@keyframes bgSize {
 0% {
 background-size: 300% 100%;
 }
 100% {
 background-size: 100% 100%;
 }
}

效果如下:

通过改变 background-size 的第一个值,我将背景图的大小由 3 倍背景区大小向 1 倍背景区大小过渡,在背景图变换的过程中,就有了一种动画的效果。

而至于为什么要配合 background-position: 100% 0 。是由于如果不设置 background-position ,默认情况下的值为 0% 0%,会导致动画最左侧的颜色不变,像下面这样,不大自然:

使用CSS巧妙地制作背景色渐变动画实例

通过 transform 模拟渐变动画

上面两种方式虽然都可以实现,但是总感觉不够自由,或者随机性不够大。

不仅如此,上述两种方式,由于使用了 background-positionbackground-size,并且在渐变中改变这两个属性,导致页面不断地进行大量的重绘(repaint),对页面性能消耗非常严重,所以我们还可以试试 transfrom 的方法:

使用伪元素配合 transform 进行渐变动画,通过元素的伪元素 before 或者 after ,在元素内部画出一个大背景,再通过 transform 对伪元素进行变换:

p {
 background: linear-gradient(90deg, #ffc700 0%, #e91e1e 33%, #6f27b0 66%, #00ff88 100%);
 background-position: 100% 0;
 animation: bgSize 5s infinite ease-in-out alternate;
}
@keyframes bgSize {
 0% {
 background-size: 300% 100%;
 }
 100% {
 background-size: 100% 100%;
 }
}

实现原理如下图所示:

使用CSS巧妙地制作背景色渐变动画实例

我们可以在任意 animation 动画过程中再加入 scaleskewroate 等变换,让效果看上去更加逼真随机。效果如下:

上面列出来的只是部分方法,理论而言,伪元素配合能够产生位移或者形变的属性都可以完成上面的效果。我们甚至可以运用不同的缓动函数或者借鉴蝉原则,制作出随机性十分强的效果。

当然,本文罗列出来的都是纯 CSS 方法,使用 SVG 或者 Canvas 同样可以制作出来,而且性能更佳。感兴趣的读者可以自行往下研究。

运用背景色渐变动画

背景色渐变动画具体可以运用在什么地方呢,稍微举个例子。

背景色渐变过渡实现按钮的明暗变化

使用CSS巧妙地制作背景色渐变动画实例

效果如下:

除此之外,在背景板凸显文字,让一些静态底图动起来吸引眼球等地方都有用武之地。

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