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

而下面本文再给大家介绍一种创建炫酷背景图像方法，带大家了解一下如何利用CSS3创建变色背景图像动画，让你的网页更吸引人！

我们先来看看效果图

下面我们来研究一下是怎么实现这个效果的：

首先我们不创建标签，直接在body标签上设置背景图片

body {
       background-image: url("https://img.js-code.COM/upload/article/000/000/024/612360451cede816.jpg");
      background-size: cover;
      background-rePEat: no-repeat;
      background-attachment: fixed;
      background-posITion: center;
}
    

怎么将图片变色呢？这就需要在背景图片上添加一个颜色层作为覆盖层，这个可以利用linear-gradient()函数实现：

background-image:            linear-gradient(4deg, rgba(0,255,254,0.3) 50%, rgba(0,255,254,0.3) 100%),   url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
    

此时这个还是静态效果，怎么实现不断变色的动态效果？我们可以利用@keyframes和animation属性来实现--添加动画效果：

• 利用animation属性设置动画名称、播放时间、播放次数等：
  

body {
      background-image: url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
      background-Size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      animation-name: background-overlay-animation;
      animation-duration: 5s;
    	animation-iteration-count: infinite;
    	animation-direction: alternate;
    	animation-timing-function: linear;
}
    

animation-name：指定要绑定到选择器的关键帧的名称

animation-duration：动画指定需要多少秒或毫秒完成

animation-timing-function：设置动画将如何完成一个周期

animation-delay：设置动画在启动前的延迟间隔。

animation-iteration-count：定义动画的播放次数。

animation-direction：指定是否应该轮流反向播放动画。

animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state：指定动画是否正在运行或已暂停。

• 利用@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.js-code.com/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.js-code.com/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.js-code.com/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.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
  }
}
    

下面给出完整代码：

!DOCTYPE htML>
    html>
    head>
    meta charset="utf-8">
    style>
@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.js-code.com/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.js-code.com/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.js-code.com/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.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
  }
}
@-webkit-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.js-code.com/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.js-code.com/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.js-code.com/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.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
  }
}
body {
       background-image: url("https://img.js-code.com/upload/article/000/000/024/612360451cede816.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
      animation-name: background-overlay-animation;
      animation-duration: 5s;
    	animation-iteration-count: infinite;
    	animation-direction: alternate;
    	animation-timing-function: linear;
}
    /style>
    /head>
    body>
    !--   你的内容放在这里 -->
    /body>
    /html>
    

PHP中文网平台有非常多的视频教学资源，欢迎大家学习《css视频教程》！

以上就是CSS3怎么给背景图片添加动态变色效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！