本文最后更新于854 天前，其中的信息可能已经过时，如有错误请评论留言
效果展示
代码展示
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>showe</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #0c192c;
}
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.bubbles {
display: flex;
}
.bubbles span {
width: 30px;
height: 30px;
background-color: #4fc3dc;
margin: 0 4px;
border-radius: 50%; /* 四个值设成一样的一个值，食其为圆形 */
/* 阴影：水平偏移 垂直偏移 模糊半径 扩展半径 阴影颜色*/
box-shadow: 0 0 0 10px #4fc3dc44,
0 0 50px #4fc3dc,
0 0 100px #4fc3dc;
/* animation: animate calc(100s / var(--i)) linear infinite; 和下面JS中的注释代码一起使用，另一种方法实现散乱气泡 */
}
.bubbles span:nth-child(even) {
background-color: #ff2d75;
box-shadow: 0 0 0 10px #ff2d7544,
0 0 50px #ff2d75,
0 0 100px #ff2d75;
}
@keyframes animate {
0% {
transform: translateY(99vh) scale(0);
}
100% {
transform: translateY(-6vh) scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="bubbles">
/* 你也可以不用JS，在这里手写若干个span */
</div>
</div>
<script>
const bubblesContainer = document.querySelector('.bubbles')
for (let i = 1; i <= 41; i++) {
const bubble = document.createElement('span')
// bubble.style.setProperty('--i', i) 每一个设一个不同的变量i用于配合上面随机动画时间形成散乱效果
// 生成随机动画时间（10 秒到 25 秒之间）
const animationDuration = Math.random() * 15 + 10
// 设置动画属性：动画名称 时间 缓和 无限循环
bubble.style.animation = `animate ${animationDuration}s ease-in-out infinite`
bubblesContainer.appendChild(bubble)
}
</script>
</body>
</html>-
for循环只循环了41次，是因为最多只能有41个span，多了就会挤压变形，导致最终效果变成椭圆形而不是圆形
上述问题可以解决，但是其实没有太大必要，还是在这里简单说一下
只要给span添加flex-shrink属性，让其属性值等于 0 就可以实现子元素不挤压，就不会出现变形问题，for循环100次200次都依然报持圆形
但是，最终效果气泡数其实并没有变多，出现在页面中的span元素依旧是那41个，所以其实改不改意义不大，还是附上这种方式的完整代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>showe</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: #0c192c; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubbles { display: flex; } .bubbles span { width: 30px; height: 30px; background-color: #4fc3dc; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc; /* animation: animate calc(100s / var(--i)) linear infinite; */ flex-shrink: 0; /* 子元素不挤压 */ } .bubbles span:nth-child(even) { background-color: #ff2d75; /* 阴影：水平偏移 垂直偏移 模糊半径 扩展半径 阴影颜色*/ box-shadow: 0 0 0 10px #ff2d7544, 0 0 50px #ff2d75, 0 0 100px #ff2d75; } @keyframes animate { 0% { transform: translateY(99vh) scale(0); } 100% { transform: translateY(-6vh) scale(1); } } </style> </head> <body> <div class="container"> <div class="bubbles"> </div> </div> <script> const bubblesContainer = document.querySelector('.bubbles') for (let i = 1; i <= 241; i++) { const bubble = document.createElement('span') // bubble.style.setProperty('--i', i) // bubble.style.setProperty('flex-shrink', 0) 这么设置也可以 // 生成随机动画时间（10 秒到 25 秒之间） const animationDuration = Math.random() * 15 + 10 // 设置动画属性： 缓和 无限循环 bubble.style.animation = `animate ${animationDuration}s ease-in-out infinite` bubblesContainer.appendChild(bubble) } </script> </body> </html>
