admin 管理员组

文章数量: 1087649

css3空中飘浮的气球动画

效果

HTML结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="balloon1 balloon"><img src="images/balloon1.png" /><div class="text">love</div></div><div class="balloon2 balloon"><img src="images/balloon2.png" /><div class="text">love</div></div><div class="balloon3 balloon"><img src="images/balloon3.png" /><div class="text">love</div></div><div class="balloon4 balloon"><img src="images/balloon4.png" /><div class="text">love</div></div><div class="balloon5 balloon"><img src="images/balloon5.png" /><div class="text">love</div></div><!-- 云 --><div class="cloud1 cloud"> </div><div class="cloud2 cloud"> </div><div class="cloud3 cloud"> </div>	<div class="cloud4 cloud"> </div>
</body>
</html>

css样式

html{height: 100%;
}body{background: url(images/bg.jpg) no-repeat center top;background-size: 100% 100%;
}.balloon{position: fixed;width: 100px;height: 200px;
}.balloon .text{width: 70px;height: 65px;background: url(images/love.png) no-repeat center center;padding: 15px 5px 0;text-align: center;margin: 0 auto;background-size: 100% auto;
}.balloon img{display: block;width: 100%;height: auto;
}.balloon1{bottom:-200px; left:400px;animation: myfirst1 20s linear infinite; z-index:2222;animation-delay:0s;
}.balloon2{bottom:-200px; left:650px;animation: myfirst2 22s 1s linear infinite;animation-delay:2s;width:70px;
}.balloon3{ bottom:-200px; left:900px;animation: myfirst3 22.2s linear infinite; z-index:2222;animation-delay:3s;
}.balloon4{ bottom:-200px; left:1050px;animation: myfirst4 21s 0.2s linear infinite; z-index:2222;animation-delay:5s;
}.balloon5{ bottom:-200px; left:1250px;animation: myfirst5 19.5s 1.2s linear infinite;animation-delay:4s;width:60px;
}.balloon5 .text{ width:50px; height:55px; padding: 5px 5px 0; margin:0 auto;
}.balloom2 .text{ width:60px; height:65px; padding: 5px 5px 0; margin:0 auto;
}/* 云 */
.cloud{position:fixed;
}.cloud1{width:567px; height:185px; background:url(images/cloud1.png) no-repeat center center; left:1060px;top:318px;animation: myfirst6 50s linear infinite;
}.cloud2{ width:605px; height:253px; background: url(images/cloud2.png) no-repeat center center;left:180px;top:249px;animation: myfirst7 50s linear infinite;
}.cloud3{width:348px; height:226px; background: url(images/cloud3.png) no-repeat center center;left:50px; top:500px;animation: myfirst8 50s linear infinite;
}.cloud4{width:786px; height:362px; background:url(../images/yun4.png) no-repeat center center; left:762px; top:433px;animation: myfirst9 50s linear infinite;
}/* 动画 */
@keyframes myfirst1{from{bottom: -200px;}to{bottom: 800px;}
}@keyframes myfirst2{from {bottom: -200px;}to {bottom: 850px;}
}@keyframes myfirst3{from {bottom: -200px;}to {bottom: 820px;}
}@keyframes myfirst4{from {bottom: -200px;}to {bottom: 780px;}
}@keyframes myfirst5{from {bottom: -200px;}to {bottom: 830px;}
}@keyframes myfirst6{from {left: 1060px;}to {left: 1250px;}
}@keyframes myfirst7{from {left: 180px;}to {left: 400px;}
}@keyframes myfirst8{from {left: 50px;}to {left: 350px;}
}@keyframes myfirst9{from {left: 762px;}to {left: 1000px;}
}

本文标签： css3空中飘浮的气球动画

版权声明：本文标题：css3空中飘浮的气球动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1687331023a90378.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。