CSS3怎么给背景图片添加动态变色效果
-
利用@keyframes定义每一帧动画：
@keyframes background-overlay-animation {
0% {
background-image:
linear-gradient(4deg, rgba(255,78,36,0.3) 50%, rgba(255,78,36,0.3) 100%),
url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
}
25% {
background-image:
linear-gradient(4deg, rgba(213,49,127,0.3) 50%, rgba(213,49,127,0.3) 100%),
url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
}
50% {
background-image:
linear-gradient(4deg, rgba(36,182,255,0.3) 50%, rgba(36,182,255,1) 100%),
url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
}
100% {
background-image:
linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),
url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
}
}
下面给出完整代码：
以上就是CSS3怎么给背景图片添加动态变色效果的详细内容，更多请关注毛票票其它相关文章！