使用CSS3轻松实现背景: 浮云

如果正确使用了背景css3中替换背景图片，将会给网页带来意想不到的效果. 过去，我们只能使用Flash或Javascript. 幸运的是css3中替换背景图片，CSS3的流行使我们能够使用它来达到这种效果，而不再依赖其他编程技术. 一段简单的CSS代码可以轻松实现以下效果.

慢云

这种背景是通过移动背景图像的位置来实现的.

而不是使用CSS3过渡.

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

上面是定义，以下内容将应用于具有背景图像的页面元素:

#animate-area { 
  width: 560px; 
  height: 400px; 
  background-image: url(bg-clouds.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 40s linear infinite;
}

背景云图像以40秒的速率从左向右平滑而优雅地漂移，并与下一个周期无缝对接，从而无限循环向下浮动.

太高兴了，不再需要js来操作！尽管在这些CSS编写中添加了一些浏览器引擎兼容性前缀，但这似乎很烦人，但至少比以前更有效，并且易于配置.

观看演示

（英语: davidwalsh. ）

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-219375-1.html