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怎么给背景图片添加动态变色效果的详细内容,更多请关注毛票票其它相关文章!