CSS3动画animation实现云彩向左滚动
发布时间：2014-05-09 11:10:33 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS3动画animation如何实现云彩向左滚动的效果，需要的朋友可以参考下
实现的图像动画效果大致是这样的：云彩向左滚动！
【代码效果】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画animation实现漂浮的云</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.wrap {
height: 190px;
width: 600px;
margin: 150px auto 0;
background: url('bg-clouds.png');
-webkit-animation:cloud 40s linear infinite;
-o-animation:cloud 40s linear infinite;
}
@-webkit-keyframes cloud {
from{background-position:0% 0%}
to{background-position:50% 50%}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
【用到的素材】
【代码效果】
复制代码
代码如下:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3动画animation实现漂浮的云</title>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.wrap {
height: 190px;
width: 600px;
margin: 150px auto 0;
background: url('bg-clouds.png');
-webkit-animation:cloud 40s linear infinite;
-o-animation:cloud 40s linear infinite;
}
@-webkit-keyframes cloud {
from{background-position:0% 0%}
to{background-position:50% 50%}
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
【用到的素材】
相关文章
CSS3+Animation实现鼠标滑过按钮背景动画特效源码
CSS3+Animation实现鼠标滑过按钮背景动画特效源码是一款当鼠标滑过按钮时，使用CSS3 animation来动画background-size和background-position属性，来制作各种背景动画效果。2016-04-19
CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)
CSS3 Animation 制作按钮鼠标滑过动画填充背景特效源码(13种)是一款共有13种动画填充背景效果，均由按钮的伪元素和CSS3 animation来制作完成，效果非常棒，喜欢的朋友前来2016-04-12- 在CSS3中我们可以使用animation属性来创建复杂的动画效果，本文就要借助它实现雪花飘落特效，功能代码如下，希望对大家学习css3有所帮助2014-05-14
css3 animation实现的loading动画加载进度条效果
一款纯css3 animation动画属性页面loading动画加载进度条效果2014-04-18
纯CSS3 animation属性实现的GIF图片进度加载效果
一款纯CSS3 animation属性实现GIF图片进度加载效果2014-01-22- 本篇文章对CSS3中的animation的使用进行了详细的介绍，需要的朋友可以参考下2013-05-09
css3动画事件—webkitAnimationEnd与计时器time事件
用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件,关于这个问题，本文给出详细的解决方案，感兴趣的朋友2013-01-31- 关键贞的动画效果如果一样，可以将关键贞的百分比用逗号隔开，然后再写效果2012-05-10
CSS3 Animation 制作动画点击波效果代码是一款使用CSS3 animation动画来制作点击波效果，可以在按钮和图片等元素上制作点击波特效。需要的朋友前来下载源码2016-05-04
最新评论