css3空中飘浮的气球动画

最新推荐文章于 2022-12-02 10:38:15 发布

十六进制呀

最新推荐文章于 2022-12-02 10:38:15 发布

阅读量1.3k

点赞数 1

分类专栏： html+css3 文章标签： html css3

本文链接：https://blog.csdn.net/m0_48268538/article/details/106947753

版权

html+css3 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

效果
在这里插入图片描述

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;
    }
}

十六进制呀

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
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" hre
复制链接

扫一扫