HTML5+CSS3实现循环飘动的云朵

技术帮助

很久没有更新过素材了，今天给大家分享一个html5+css的现循环飘动的云朵案例素材，希望多各位站长有所帮助

效果展示：

HTML代码部分

1. <div class="warp">
   
2.             <div id="clouds">
   
3.                 <div class="cloud cloud-1"></div>
   
4.                 <div class="cloud cloud-2"></div>
   
5.                 <div class="cloud cloud-3"></div>
   
6.                 <div class="cloud cloud-4"></div>
   
7.                 <div class="cloud cloud-5"></div>
   
8.                 <div class="cloud cloud-6"></div>
   
9.             </div>
   
10.         </div>

复制代码

CSS代码部分

1. /*云层动画*/
   
2. @-webkit-keyframes moveclouds {
   
3.     from {
   
4.         margin-left: -200px
   
5.     }
   
6. 
   
7.     to {
   
8.         margin-left: 2200px
   
9.     }
   
10. }
    
11. 
    
12. @-moz-keyframes moveclouds {
    
13.     from {
    
14.         margin-left: -200px
    
15.     }
    
16. 
    
17.     to {
    
18.         margin-left: 2200px
    
19.     }
    
20. }
    
21. 
    
22. @-o-keyframes moveclouds {
    
23.     from {
    
24.         margin-left: -200px
    
25.     }
    
26. 
    
27.     to {
    
28.         margin-left: 2200px
    
29.     }
    
30. }
    
31. 
    
32. @keyframes moveclouds {
    
33.     from {
    
34.         margin-left: -200px
    
35.     }
    
36. 
    
37.     to {
    
38.         margin-left: 2200px
    
39.     }
    
40. }

复制代码

CSS代码：云层样式

1. /*云*/
   
2. .cloud {
   
3.     position: absolute;
   
4. }
   
5. .cloud-1 {
   
6.     top: 60px;
   
7.     left: -100px;
   
8.     width: 98px;
   
9.     height: 36px;
   
10.     background: url(../images/cloud-1.png);
    
11.     -webkit-animation: moveclouds 145s infinite linear;
    
12.     -moz-animation: moveclouds 145s infinite linear;
    
13.     -o-animation: moveclouds 145s infinite linear;
    
14.     animation: moveclouds 145s infinite linear;
    
15. }
    
16. .cloud-2 {
    
17.     top: 170px;
    
18.     left: -420px;
    
19.     width: 91px;
    
20.     height: 35px;
    
21.     background: url(../images/cloud-2.png);
    
22.     -webkit-animation: moveclouds 135s infinite linear;
    
23.     -moz-animation: moveclouds 135s infinite linear;
    
24.     -o-animation: moveclouds 135s infinite linear;
    
25.     animation: moveclouds 135s infinite linear;
    
26. }
    
27. .cloud-3 {
    
28.     top: 140px;
    
29.     left: -380px;
    
30.     width: 88px;
    
31.     height: 34px;
    
32.     background: url(../images/cloud-3.png);
    
33.     -webkit-animation: moveclouds 38s infinite linear;
    
34.     -moz-animation: moveclouds 38s infinite linear;
    
35.     -o-animation: moveclouds 38s infinite linear;
    
36.     animation: moveclouds 38s infinite linear;
    
37. }
    
38. .cloud-4 {
    
39.     top: 120px;
    
40.     left: -300px;
    
41.     width: 135px;
    
42.     height: 53px;
    
43.     background: url(../images/cloud-4.png);
    
44.     -webkit-animation: moveclouds 103s infinite linear;
    
45.     -moz-animation: moveclouds 103s infinite linear;
    
46.     -o-animation: moveclouds 103s infinite linear;
    
47.     animation: moveclouds 103s infinite linear;
    
48. }
    
49. .cloud-5 {
    
50.     top: 230px;
    
51.     left: -200px;
    
52.     width: 100px;
    
53.     height: 40px;
    
54.     background: url(../images/cloud-5.png);
    
55.     -webkit-animation: moveclouds 65s infinite linear;
    
56.     -moz-animation: moveclouds 65s infinite linear;
    
57.     -o-animation: moveclouds 65s infinite linear;
    
58.     animation: moveclouds 65s infinite linear;
    
59. }
    
60. .cloud-6 {
    
61.     top: 40px;
    
62.     left: -180px;
    
63.     width: 141px;
    
64.     height: 39px;
    
65.     background: url(../images/cloud-6.png);
    
66.     -webkit-animation: moveclouds 30s infinite linear;
    
67.     -moz-animation: moveclouds 30s infinite linear;
    
68.     -o-animation: moveclouds 30s infinite linear;
    
69.     animation: moveclouds 30s infinite linear;
    
70. }

复制代码

使用时注意云层CSS中的图片路径

云层图片下载：

游客，如果您要查看本帖隐藏内容请回复

技术帮助

需要的同学可以试试！

聊仁

学习了，谢谢分享！

qq936967462

谢谢分享！！！！

qq1765334669

66666666666666666

djntt

666666666666666666

chuanshang

666666666666