那么还是那句话"我们废话不多说！"
上代码！！！
好嘞！！！各位爷这次我们上代码！！！
代码语言：javascript复制<!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>泡泡'小胖子'</title>
<style>
*{
margin: 0;
padding: 0;
}
.zhongjian1{
/*100%窗口高度*/
height:100vh;
/*渐变背景*/
background: linear-gradient(150deg,#75c7f7,#afec5f);
/*溢出隐藏*/
overflow: hidden;
}
.zhongjianbigbox{
margin: 300px 0 0 750px;
width: 300px;
height: 300px;
/*相对定位*/
position: relative;
}
.zhongjianpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #87c55e,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: zhongjianpaopao 4s ease-in-out infinite;
}
.zhongjianyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 200px;
height: 80px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -95px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: zhongjianyinying 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes zhongjianpaopao{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
@keyframes zhongjianyinying{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
/* 中间泡泡完成 */
.zuoshangbigbox{
margin: -500px 0 0 50px;
width: 200px;
height: 200px;
/*相对定位*/
position: relative;
}
.zuoshangpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #5ec5c0,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: zuoshangpaopao 4s ease-in-out infinite;
}
.zuoshangyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 100px;
height: 60px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: zuoshangyinying 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes zuoshangpaopao{
0%,100%{
transform: translateY(0);
}
35%{
transform: translateY(-80px);
}
}
@keyframes zuoshangyinying{
0%,100%{
transform: scale(0.5);
}
60%{
transform: scale(1);
}
}
/* 左上完成 */
.youshangbigbox{
margin: -200px 0 0 1700px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.youshangpaopao{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #c5735e,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: youshangpaopao 4s ease-in-out infinite;
}
.youshangyinying{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: youshangyinying 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes youshangpaopao{
0%,100%{
transform: translateY(0);
}
35%{
transform: translateY(-80px);
}
}
@keyframes youshangyinying{
0%,100%{
transform: scale(0.5);
}
35%{
transform: scale(1);
}
}
/* 右上完成 */
/* 其他开始 */
.qitabigbox1{
margin: 300px 0 0 1500px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.qtpaopao1{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #715ec5,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao1 4s ease-in-out infinite;
}
.qtyinying1{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying1 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao1{
0%,100%{
transform: translateY(0);
}
65%{
transform: translateY(-80px);
}
}
@keyframes qtyinying1{
0%,100%{
transform: scale(0.5);
}
65%{
transform: scale(1);
}
}
.qitabigbox2{
margin: -220px 0 0 100px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.qtpaopao2{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #c3c55e,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao2 4s ease-in-out infinite;
}
.qtyinying2{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying2 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao2{
0%,100%{
transform: translateY(0);
}
65%{
transform: translateY(-80px);
}
}
@keyframes qtyinying2{
0%,100%{
transform: scale(0.5);
}
65%{
transform: scale(1);
}
}
.qitabigbox3{
margin: -300px 0 0 300px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.qtpaopao3{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #c55e9a,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao3 4s ease-in-out infinite;
}
.qtyinying3{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying3 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao3{
0%,100%{
transform: translateY(0);
}
45%{
transform: translateY(-80px);
}
}
@keyframes qtyinying3{
0%,100%{
transform: scale(0.5);
}
45%{
transform: scale(1);
}
}
.qitabigbox4{
margin: 120px 0 0 1200px;
width: 100px;
height: 100px;
/*相对定位*/
position: relative;
}
.qtpaopao4{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #5e9fc5,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao4 4s ease-in-out infinite;
}
.qtyinying4{
background-color: rgba(0, 0, 0, 0.15);
width: 70px;
height: 30px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying4 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao4{
0%,100%{
transform: translateY(0);
}
55%{
transform: translateY(-80px);
}
}
@keyframes qtyinying4{
0%,100%{
transform: scale(0.5);
}
55%{
transform: scale(1);
}
}
.qitabigbox5{
margin: -80px 0 0 400px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.qtpaopao5{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #bd5ec5,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao5 4s ease-in-out infinite;
}
.qtyinying5{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying5 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao5{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
@keyframes qtyinying5{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
.qitabigbox6{
margin: -600px 0 0 1200px;
width: 150px;
height: 150px;
/*相对定位*/
position: relative;
}
.qtpaopao6{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #5ec563,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao6 4s ease-in-out infinite;
}
.qtyinying6{
background-color: rgba(0, 0, 0, 0.15);
width: 90px;
height: 50px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -55px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying6 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao6{
0%,100%{
transform: translateY(0);
}
35%{
transform: translateY(-80px);
}
}
@keyframes qtyinying6{
0%,100%{
transform: scale(0.5);
}
35%{
transform: scale(1);
}
}
.qitabigbox7{
margin: -300px 0 0 600px;
width: 250px;
height: 250px;
/*相对定位*/
position: relative;
}
.qtpaopao7{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #c55e5e,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao7 4s ease-in-out infinite;
}
.qtyinying7{
background-color: rgba(0, 0, 0, 0.15);
width: 100px;
height: 60px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -65px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying7 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao7{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
@keyframes qtyinying7{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
.qitabigbox8{
margin: 400px 0 0 650px;
width: 100px;
height: 100px;
/*相对定位*/
position: relative;
}
.qtpaopao8{
background-image: url(../泡泡特效/img/1.jpg);
background-size: 120% 100%;
width: 100%;
height: 100%;
background: radial-gradient(circle at 75% 30%,#fff 5px,#f8b806 8%
#5b5b5b 60%,#ff7221 100%);
border-radius: 50%;
/*阴影*/
box-shadow:
inset 0 0 10px #fff,
inset -10px -20px 30px #8ce6d3,
inset 10px -60px 50px #dff1c8,
inset 0 20px 40px #f9f6de,
0 0 40px #fff;
/*执行动画：动画名 时长 加速后减速，无限循环*/
animation: qtpaopao8 4s ease-in-out infinite;
}
.qtyinying8{
background-color: rgba(0, 0, 0, 0.15);
width: 80px;
height: 40px;
border-radius: 50%;
/*绝对定位*/
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -100px;
/*一点模糊效果*/
filter: blur(1px);
animation: qtyinying8 4s ease-in-out infinite
}
/*定义动画*/
/*泡泡浮动动画*/
@keyframes qtpaopao8{
0%,100%{
transform: translateY(0);
}
50%{
transform: translateY(-80px);
}
}
@keyframes qtyinying8{
0%,100%{
transform: scale(0.5);
}
50%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="zhongjian1">
<div class="zhongjianbigbox">
<div class="zhongjianpaopao"></div>
<div class="zhongjianyinying"></div>
</div>
<div class="zuoshangbigbox">
<div class="zuoshangpaopao"></div>
<div class="zuoshangyinying"></div>
</div>
<div class="youshangbigbox">
<div class="youshangpaopao"></div>
<div class="youshangyinying"></div>
</div>
<div class="qitabigbox1">
<div class="qtpaopao1"></div>
<div class="qtyinying1"></div>
</div>
<div class="qitabigbox2">
<div class="qtpaopao2"></div>
<div class="qtyinying2"></div>
</div>
<div class="qitabigbox3">
<div class="qtpaopao3"></div>
<div class="qtyinying3"></div>
</div>
<div class="qitabigbox4">
<div class="qtpaopao4"></div>
<div class="qtyinying4"></div>
</div>
<div class="qitabigbox5">
<div class="qtpaopao5"></div>
<div class="qtyinying5"></div>
</div>
<div class="qitabigbox6">
<div class="qtpaopao6"></div>
<div class="qtyinying6"></div>
</div>
<div class="qitabigbox7">
<div class="qtpaopao7"></div>
<div class="qtyinying7"></div>
</div>
<div class="qitabigbox8">
<div class="qtpaopao8"></div>
<div class="qtyinying8"></div>
</div>
</div>
</body>
</html>我相信爱好前端（小特效）的朋友们已经等不及了，这里可以复制粘贴的哦~（如果不嫌弃的话，嘿嘿）当然最好是自己整明白之后写出更棒的（升级版啦~）
Stars never ask passers-by！！！
各位船长，我们下次伟大航路再见，goodbye~
