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="data:images/balloon1.png" /><div class="text">love</div></div><div class="balloon2 balloon"><img src="data:images/balloon2.png" /><div class="text">love</div></div><div class="balloon3 balloon"><img src="data:images/balloon3.png" /><div class="text">love</div></div><div class="balloon4 balloon"><img src="data:images/balloon4.png" /><div class="text">love</div></div><div class="balloon5 balloon"><img src="data: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空中飘浮的气球动画相关推荐

html5 canvas烂漫的空中散落的花瓣动画特效
html5 canvas烂漫的空中散落的花瓣动画特效作品介绍 1.网页作品简介方面 :html5 canvas烂漫的空中散落的花瓣动画特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
html给文字加动态效果,20种配合场景的CSS3鼠标滑过文字动画特效
这是一组非常有创意的配合场景使用的CSS3鼠标滑过文字动画特效.这组鼠标滑过特效中,以20张不同的图片作为不同的场景,例如图片是一条公路,鼠标滑过这上面的文字时,就会在文字下边出现一条公路的动画效果. ...
css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
【CSS3初探之变形与动画】令人惊叹的CSS3
前言这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...
收起展开循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画
市面上大多数的热点地图,都是以 JavaScript 来做的,但是使用 CSS3 制作的热点地图倒还真的挺少见的. 其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效 ...

css3空中飘浮的气球动画

css3空中飘浮的气球动画相关推荐

最新文章

热门文章