用html和css实现气泡效果
代码地址
原理
实际上就是设置很多div，然后赋予每个div颜色、形状以及动画效果 首先对外层div设置背景、大小、边距等 然后设置将气泡对应的css设置为absolute布局，border-radius设置为50%，变成圆形，再设置颜色，透明度等信息 最后设置每一个气泡的细节以及动画延迟等，然气泡看起来是在不同的时间产生的，并且具有连贯性
css部分
.bubble-background {
position: relative;
background-size: 100%;
min-height: 300px;
padding: 20px;
background-color: #87eafa;
}
.bubbles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.bubble {
position: absolute;
border-radius: 50%;
bottom: 0;
background-color: #004480d6;
opacity: 0.7;
animation: flying 10s infinite ease-in;
}
.bubble:nth-child(1) {
width: 30px;
height: 30px;
left: 10%;
bottom: -30px;
animation-duration: 8s;
}
.bubble:nth-child(2) {
width: 25px;
height: 25px;
left: 15%;
bottom: -25px;
animation-duration: 8s;
animation-delay: 1s
}
.bubble:nth-child(3) {
width: 27px;
height: 27px;
left: 30%;
bottom: -27px;
animation-duration: 7s;
}
.bubble:nth-child(4) {
width: 25px;
height: 25px;
left: 40%;
bottom: -25px;
animation-duration: 7s;
animation-delay: 2s
}
.bubble:nth-child(5) {
width: 25px;
height: 25px;
left: 50%;
bottom: -25px;
animation-duration: 8s;
animation-delay: 2s
}
.bubble:nth-child(6) {
width: 33px;
height: 33px;
left: 62%;
bottom: -40px;
animation-duration: 6s;
animation-delay: 3s
}
.bubble:nth-child(7) {
width: 20px;
height: 20px;
left: 70%;
bottom: -20px;
animation-duration: 10s;
animation-delay: 4s;
}
.bubble:nth-child(8) {
width: 30px;
height: 30px;
left: 80%;
bottom: -30px;
animation-duration: 6s;
animation-delay: 1s
}
@keyframes flying {
0% {
transform: translateX(0);
}
30% {
transform: translateX(100px);
}
60% {
transform: translateX(-50px);
}
100% {
bottom: 350px;
transform: translateX(0);
}
}
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--引入css样式-->
<link rel="stylesheet" type="text/css" href="./css/bubble.css" />
</head>
<body>
<div class="bubble-background">
<!--气泡浮动效果-->
<div class="bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</div>
</body>
</html>
效果预览
