[分享]css3动画背景拉伸变色

CSS3动画背景拉伸变色是一种非常流行的网页设计技巧，它可以通过使用CSS3的动画特性，使网页背景产生类似于涟漪般的拉伸变色效果，为网页设计增色不少。以下是这个技巧的示例代码：html, body {...

CSS3动画背景拉伸变色是一种非常流行的网页设计技巧，它可以通过使用CSS3的动画特性，使网页背景产生类似于涟漪般的拉伸变色效果，为网页设计增色不少。以下是这个技巧的示例代码：

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: #111 url('http://cdn.codeinwp.com/wp-content/themes/codeinwp/src/images/demo/background.jpg') no-repeat center center fixed;
  -webkit-animation: bg-stretch 20s ease-out infinite;
  -moz-animation: bg-stretch 20s ease-out infinite;
  -ms-animation: bg-stretch 20s ease-out infinite;
  animation: bg-stretch 20s ease-out infinite;
}

@keyframes bg-stretch {
  0% {
    background-size: 100% auto;
    background-position: center center;
  }

  50% {
    background-size: 200% auto;
    background-position: center center;
  }

  100% {
    background-size: 100% auto;
    background-position: center center;
  }
}

@-webkit-keyframes bg-stretch {
  0% {
    background-size: 100% auto;
    background-position: center center;
  }

  50% {
    background-size: 200% auto;
    background-position: center center;
  }

  100% {
    background-size: 100% auto;
    background-position: center center;
  }
} 

代码中的关键在于使用了CSS3的animation特性，通过设定关键点，定义了一个由0%到50%再到100%的动画过程，使背景图像经过拉伸至二倍宽度，再然后恢复原始状态的动效。同时，使用了Pre标签，使代码更易于阅读和理解。