css气泡背景特效

css气泡背景特效https://www.bootstrapmb.com/item/14879

要创建一个CSS气泡背景特效,你可以使用CSS的伪元素(:before:after)、border-radius 属性来创建圆形或椭圆形的"气泡",以及backgroundanimation 属性来设置背景和动画效果。

以下是一个简单的示例,展示了如何使用CSS创建一个动态的气泡背景特效:

HTML:

复制代码
复制代码
html`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS气泡背景特效</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="bubble-background"></div>
</body>
</html>`

CSS (styles.css):

复制代码
复制代码
css`body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* 防止内容滚动 */
}

.bubble-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000; /* 背景色 */
overflow: hidden;
animation: bubbleMove 5s linear infinite; /* 应用背景动画 */
}

.bubble-background::before,
.bubble-background::after {
content: '';
position: absolute;
width: 50px; /* 气泡大小 */
height: 50px;
border-radius: 50%; /* 圆形气泡 */
background: rgba(255, 255, 255, 0.2); /* 气泡颜色 */
opacity: 0.5;
animation: float 5s ease-in-out infinite; /* 气泡浮动动画 */
}

.bubble-background::before {
top: 20%; /* 气泡初始位置 */
left: 10%;
animation-delay: 2s; /* 延迟开始时间 */
}

.bubble-background::after {
top: 40%; /* 气泡初始位置 */
left: 80%;
animation-delay: 3s; /* 延迟开始时间 */
}

@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-200px); /* 气泡上升距离 */
}
100% {
transform: translateY(0);
}
}

/* 这个动画用于让整个背景有微妙的移动效果,不是必需的 */
@keyframes bubbleMove {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 100px; /* 背景移动距离 */
}
}`

请注意,上述示例中的bubbleMove动画是可选的,并且它实际上并不创建额外的气泡效果,而只是让整个背景有微妙的移动。如果你想要更多的气泡,并且希望它们随机出现和消失,你可能需要使用JavaScript或更复杂的CSS动画来生成它们。

此外,你可以通过添加更多的伪元素、改变它们的尺寸、颜色、动画延迟和持续时间等来创建更复杂和多样化的气泡效果。

相关推荐
FanetheDivine1 分钟前
正确使用flex-1
css·html
前端飞天猪2 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡4 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克6 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
奇怪的知识又增长了15 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端
Maofu15 分钟前
从React项目 迁移到 Solid项目的踩坑记录
前端
薄荷味15 分钟前
ubuntu 服务器安装 docker
前端
Carlos_sam16 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript
莫循瑾木19 分钟前
Vue3 Composition API 完全指南
前端·vue.js·前端工程化
初辰ge22 分钟前
后端说“基本增删改查都写好了,就差切图仔对接口了!”——我一怒之下撸了个代码生成器
前端·vue.js