气泡浮动背景特效 html+css
【摘要】 先看效果：
更长看视频
实现：
添加标签底层盒子，再直接暴力添加10个气泡标签：
<div class="kuang"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class=...
先看效果：
实现：
- 添加标签底层盒子，再直接暴力添加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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 添加底层盒子样式，宽高等：
.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)); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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; opacity: 0; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
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; } }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
bottom 气泡距离底部距离。
transform: translateX（） 水平方向的偏移。
opacity: ; 透明度。1为不透，0为完全透明。
- 为每个气泡定义宽高，定位的位置等：
如：
.bubble:nth-child(1){ left: -10%; width: 50px; height: 50px; animation-duration: 9s; animation-delay: 0.1s; }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
其它气泡设定的直接看下面的源码，这个可以自己看什么效果好自己调数值；、
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; opacity: 0; } @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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
总结：
其它文章~：
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记
…等等
文章来源: blog.csdn.net，作者：北极光之夜。，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/luo1831251387/article/details/113657124
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）