CSS3动画animation实现云彩向左滚动

ttx9n · 发表于 2014-5-9 11:10:33

这篇文章主要介绍了CSS3动画animation如何实现云彩向左滚动的效果，需要的朋友可以参考下实现的图像动画效果大致是这样的：云彩向左滚动！

201405091113376.gif

【代码效果】

复制代码代码如下:
<!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>

【用到的素材】

20140509111411.png

cxst1h57 · 发表于 2023-1-17 04:31:50

谢谢您的分享！

4r8oiin60 · 发表于 2023-1-22 16:09:48

那三门，你们谁寂寞才快乐撒

locopy · 发表于 2023-9-19 17:13:26

管灌灌灌灌灌灌灌灌灌灌

z80vh · 发表于 2023-10-20 17:06:19

谢谢小Y分享

i3x3r3 · 发表于 2023-10-24 11:26:06

很不错的样子

v3sfsi · 发表于 2023-11-30 13:11:55

66666666666666666666

w18pvaep · 发表于 2024-2-22 12:47:25

女生看了弄丢了卡萨诺的卡洛斯

do827261756 · 发表于 2024-3-27 05:24:33

管灌灌灌灌灌灌灌灌灌灌

醉梦娱乐网 · 发表于 2024-5-17 19:03:33

啪啪啪生怕PSP怕

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS3动画animation实现云彩向左滚动

相关帖子