先看效果：
更長看視頻
實作：
- 添加標簽底層盒子，再直接暴力添加10個氣泡標簽：
<div class="kuang">
<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 class="bubble"></div>
<div class="bubble"></div>
</div>
- 添加底層盒子樣式，寬高等：
.kuang{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
background-image: linear-gradient(180deg,rgb(78, 168, 241),rgb(37, 91, 241));
}
position: fixed; 相對于瀏覽器視窗進行定位，
background-image: linear-gradient(180deg,rgb(78, 168, 241),rgb(37, 91, 241)); 漸變背景色，
- 添加氣泡的樣式：
.bubble{
position: absolute;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: inset 0 0 8px #fff;
animation: flutter 10s infinite;
}
position: absolute; 絕對定位，
border-radius: 50%; 元素四個角的角度，
box-shadow: inset 0 0 8px #fff; 陰影，
animation: flutter 10s infinite; 影片，10s，重復播放，
- 定義影片：
@keyframes flutter {
0%{
transform: translateX(0);
bottom: -100px;
opacity: 1;
}
50%{
transform: translateX(100px);
opacity: 0.5;
}
100%{
transform: translateX(0px);
bottom: 100%;
opacity: 0;
}
}
bottom 氣泡距離底部距離，
transform: translateX（） 水平方向的偏移，
opacity: ; 透明度，1為不透，0為完全透明，
- 為每個氣泡定義寬高，定位的位置等：
如：
.bubble:nth-child(1){
left: -10%;
width: 50px;
height: 50px;
animation-duration: 9s;
animation-delay: 0.1s;
}
其它氣泡設定的直接看下面的原始碼，這個可以自己看什么效果好自己調數值；、
animation-duration: 9s; 一次影片完成需要的時間，
animation-delay: 0.1s; 影片延遲幾秒后才開始播放，
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.kuang{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
background-image: linear-gradient(180deg,rgb(78, 168, 241),rgb(37, 91, 241));
}
.bubble{
position: absolute;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: inset 0 0 8px #fff;
animation: flutter 10s infinite;
}
@keyframes flutter {
0%{
transform: translateX(0);
bottom: -100px;
opacity: 1;
}
50%{
transform: translateX(100px);
opacity: 0.5;
}
100%{
transform: translateX(0px);
bottom: 100%;
opacity: 0;
}
}
.bubble:nth-child(1){
left: -10%;
width: 50px;
height: 50px;
animation-duration: 9s;
animation-delay: 0.1s;
}
.bubble:nth-child(2){
left: 15%;
width: 20px;
height: 20px;
animation-duration: 6s;
animation-delay: 1.5s;
}
.bubble:nth-child(3){
left: 20%;
width: 60px;
height: 60px;
animation-duration: 10s;
}
.bubble:nth-child(4){
left: 30%;
width: 30px;
height: 30px;
animation-duration: 5.5s;
animation-delay: 1.5s;
}
.bubble:nth-child(5){
left: 40%x;
width: 50px;
height: 50px;
animation-duration: 12s;
}
.bubble:nth-child(6){
left: 50%;
width: 20px;
height: 20px;
animation-duration: 6s;
animation-delay: 1s;
}
.bubble:nth-child(7){
left: 60%;
width: 40px;
height: 40px;
animation-duration: 8s;
animation-delay: 1s;
}
.bubble:nth-child(8){
left: 65%;
width: 60px;
height: 60px;
animation-duration: 15s;
}
.bubble:nth-child(9){
left: 80%;
width: 55px;
height: 55px;
animation-duration: 9s;
animation-delay: 0.5s;
}
.bubble:nth-child(10){
left: 100%;
width: 40px;
height: 40px;
animation-duration: 12s;
}
</style>
</head>
<body>
<div class="kuang">
<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 class="bubble"></div>
<div class="bubble"></div>
</div>
</body>
</html>
總結：
其它文章~：
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
回應式卡片懸停效果 html+css
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
炫彩流光按鈕 html+css
記一些css屬性總結（一）
Sass總結筆記
…等等
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/257121.html
標籤：其他