全民出游
index.hyml代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/index.css"> <title>Document</title> </head> <body> <div class="bg"> <!-- 云彩 --> <div class="yuncai"> <img src="./images/yun1.png" alt=""> <img src="./images/yun2.png" alt=""> <img src="./images/yun3.png" alt=""> </div> <!-- 气球 --> <div class="qiqiu"> <img src="./images/san.png" alt=""> </div> <div class="xiabiao"> <!-- 下标 --> <img src="./images/1.png" alt=""> <img src="./images/2.png" alt=""> <img src="./images/3.png" alt=""> <img src="./images/4.png" alt=""> </div> <!-- 周边游 --> <div class="zhoubian"> <img src="./images/font1.png" alt=""> </div> <!-- 小鹿 --> <div class="xiaolu"> <img src="./images/lu.png" alt=""> </div> </div> </body> </html>
index.css代码
html { height: 100%; } * { margin: 0; padding: 0; } body { width: 100%; height: 100%; } .bg { width: 100%; height: 100%; background: url(../images/f1_1.jpg) no-repeat center 0; background-size: cover; } /* 云彩 */ .yuncai { position: relative; } .yuncai img { position: absolute; left: 50%; } .yuncai img:nth-child(1) { margin-top: 20px; margin-left: -300px; animation: movey 1s infinite alternate linear; } .yuncai img:nth-child(2) { margin-top: 100px; margin-left: 450px; animation: movey 1s infinite alternate linear 0.2s; } .yuncai img:nth-child(3) { margin-top: 200px; margin-left: -500px; animation: movey 1s infinite alternate linear 0.4s; } /* 云彩动画 */ @keyframes movey { to { transform: translatex(20px); } } /* 气球 */ .qiqiu { position: relative; } .qiqiu img { width: 110px; position: absolute; left: 50%; margin-top: 100px; margin-left: -320px; animation: moveq 1s infinite alternate linear 0.4s; } /* 气球动画 */ @keyframes moveq { to { transform: translateY(-20px); } } .xiabiao { position: relative; } .xiabiao img { position: absolute; left: 50%; top: 520px; animation: moveq 1s infinite alternate linear ; } .xiabiao img:nth-child(1) { margin-left: -430px; animation: moveq 1s infinite alternate linear ; } .xiabiao img:nth-child(2) { margin-left: -195px; animation: moveq 1s infinite alternate linear 0.2s; } .xiabiao img:nth-child(3) { margin-left: 45px; animation: moveq 1s infinite alternate linear 0.4s; } .xiabiao img:nth-child(4) { margin-left: 284px; animation: moveq 1s infinite alternate linear 0.6s; } /* 周边 */ .zhoubian { position: relative; } .zhoubian img { width: 400px; position: absolute; left: 50%; margin-left: -220px; margin-top: 300px; } .xiaolu { position: relative; } .xiaolu img { position: absolute; left: 50%; margin-top: 100px; margin-left: 100px; }
这个案例就是使用一些动画效果，要注意的是那个背景图的全铺屏幕的时候，要首先设置html的高度为100%，之后进行书写就可以了，过程大概就是先写定位，确定好位置之后，写动画过程，就是@开头的代码（写在外面），最后写一个叫做ani开头的代码就可以了（写在里面）
