微客导航 » 文章资讯 » CSS3怎么给背景图片添加动态变色效果

CSS3怎么给背景图片添加动态变色效果

2023-04-18 15:10:27 424

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

返回顶部
3162201930
czq8825@qq.com

CSS3怎么给背景图片添加动态变色效果

热门推荐

随机推荐