代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 云彩图片 --> <div class="cloud"> <img src="./images/yun1.png" alt=""> <img src="./images/yun2.png" alt=""> <img src="./images/yun3.png" alt=""> </div> </body> </html> ======== CSS ======= * { margin: 0; padding: 0; } html { height: 100%; } body { height: 100%; background: url(./../images/f1_1.jpg) no-repeat center 0; /* 缩放背景图 */ /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */ /* background-size: contain; */ /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */ background-size: cover; } /* 1. img 引入图片, 控制位置 2. 定义动画,使用动画 */ .cloud img { position: absolute; left: 50%; top: 0; } .cloud img:nth-child(1) { margin-left: -300px; top: 20px; animation: cloud 1s infinite alternate; } .cloud img:nth-child(2) { margin-left: 400px; top: 100px; animation: cloud 1s infinite alternate 0.2s; } .cloud img:nth-child(3) { margin-left: -550px; top: 200px; animation: cloud 1s infinite alternate 0.4s; } /* 云彩动画 */ @keyframes cloud { to { transform: translateX(20px); } }
效果图:
移动web-动画-综合案例全民出游季
最新推荐文章于 2024-09-06 22:20:29 发布