css3动态气泡背景 |css透明度过渡时间

css转换元素，网页加载多个css，css根据页面大小变化，查看div的css样式，css中按钮大小怎么设置，css光标样式为什么没用，css透明度过渡时间 css3动态气泡背景 |css透明度过渡时间

/* 定义气泡的样式 */
.bubble {
position: absolute; /* 绝对定位 */
background-color: #fff; /* 背景颜色 */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 阴影效果 */
border-radius: 50%; /* 圆形 */
animation: float 5s ease-in-out infinite; /* 浮动动画 */
}
/* 定义浮动动画 */
@keyframes float {
from { transform: translateY(0); }
50% { transform: translateY(-20px); }
to { transform: translateY(0); }
}
/* 生成气泡 */
for (let i = 0; i< 20; i++) {
let bubble = document.createElement('div');
bubble.classList.add('bubble');
bubble.style.width = Math.floor(Math.random() * 20 + 10) + 'px'; /* 随机大小 */
bubble.style.height = bubble.style.width;
bubble.style.top = Math.floor(Math.random() * 100) + '%'; /* 随机位置 */
bubble.style.left = Math.floor(Math.random() * 100) + '%';
document.body.appendChild(bubble);
}

上面是一个简单的实现气泡背景效果的代码，其中用到了CSS3的动画和随机数生成等技术。通过这种方式生成气泡，可以使页面更加有趣和生动，吸引用户的注意力。