css3演示

漂浮的云 观看演示 英文:davidwalsh.

背景云图片以40秒一次的速度顺滑优雅的从左漂移到右,而且无缝的和下一次循环对接,这样无限循环漂浮下去。

/*使用CSS3中的animation实现背景云图片以40秒一次的速度顺滑优雅的从左漂移到右,并无限循环漂浮*/
@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;
}

 

posted on 2022-07-07 06:17  Redwei  阅读(26)  评论(0编辑  收藏  举报