css气泡背景特效

css气泡背景特效icon-default.png?t=N7T8https://www.bootstrapmb.com/item/14879

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

以下是一个简单的示例,展示了如何使用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):

 
cssbody, 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动画来生成它们。

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49570.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Dify中接入GPT-4o mini模型

GPT-4o mini模型自己承认是基于GPT-3.5架构的模型&#xff0c;有图有真相&#xff1a; 一.GPT-4o mini官网简介 GPT-4o mini&#xff08;“o"代表"omni”&#xff09;是小型型号类别中最先进的型号&#xff0c;也是OpenAI迄今为止最便宜的型号。它是多模态的&#x…

hadoop大数据安全管理:ldap、keberos、ranger

hadoop大数据中认证一般用keberos&#xff0c;授权用ranger&#xff0c;kerberos和Ldap组件共同组成整个集群的安全鉴权体系&#xff0c;Ldap负责用户数据存储。 kerberos Kerberos 是一种网络认证协议&#xff0c;用于在不安全的网络中以安全的方式对用户和服务进行身份验证。…

【MySQL】Ubuntu22.04 安装 MySQL8 数据库详解

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》《MySQL》《Qt》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 一、安装目录 1.1 更新软件源 sheepAron:/root$ sudo apt update1.2 安装mysql_ser…

Spring之Spring Bean的生命周期

Spring Bean的生命周期 通过BeanDefinition获取bean的定义信息调用构造函数实例化beanBean的依赖注入处理Aware接口&#xff08;BeanNameAware、BeanFactoryAware、ApplicationContextAware&#xff09;Bean的后置处理器BeanPostProcessor-前置初始化方法&#xff08;Initiali…

UE4 自动换行——按排序关键字1.2.3.

要自动换行的字符串举例&#xff1a;“有效节点为:1.demo-worker-02 2.demo-worker-01 3.demo-master-01” 1.获取相邻两位字符串&#xff0c;组合后与关键字比较 2.当两位字符串与关键字相等&#xff0c;附加一次换行 3.其他例如 1)2)3)、(1)(2)(3)、<1><2><…

springboot配置文件如何读取pom.xml的值

比如想读取profile.active的值&#xff0c;默认属性为pro 在maven中加入以下插件&#xff1a; <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-resources-plugin</artifactId><version>3.2.0</version>&l…

goenv丝滑控制多版本go

安装 先装下goenv brew install goenv去 ~/.bash_profile 添加一下 export GOENV_ROOT"$HOME/.goenv" export PATH"$GOENV_ROOT/bin:$PATH" eval "$(goenv init -)"执行一下让配置生效 source ~/.bash_profile插一嘴&#xff0c;如果之前是在…

保持形态真实性的大脑生成建模| 文献速递-基于人工智能(AI base)的医学影像研究与疾病诊断

Title 题目 Realistic morphology-preserving generative modelling of the brain 保持形态真实性的大脑生成建模 01 文献速递介绍 医学影像研究通常受到数据稀缺和可用性的限制。治理、隐私问题和获取成本都限制了医学影像数据的访问&#xff0c;加上深度学习算法对数据的…

(十九)原生js案例之h5地里位置信息与高德地图的初使用

h5 地里位置信息 1. 获取当前位置信息 window.onload function () {const oBtn document.querySelector("#btn");const oBox document.querySelector("#box");oBtn.onclick function () {window.navigator.geolocation.getCurrentPosition(function (…

SQL每日一题:游戏玩法分析 I

题干 活动表 Activity&#xff1a; --------------------- | Column Name | Type | --------------------- | player_id | int | | device_id | int | | event_date | date | | games_played | int | --------------------- 在 SQL 中&#xff0c;表的主键是 (player_id, eve…

49 IRF 经典案例

49 IRF 经典案例 一 H3C-FWW-RF 脚本 <IRF-MATER-FW1000>display current-configuration #version 7.1.064, Alpha 7164 #sysname IRF-MATER-FW1000 # context Admin id 1 #telnet server enable #irf mac-address persistent timerirf auto-update enableundo irf l…

案例研究|柯尼卡美能达软件开发(大连)有限公司基于DataEase构筑内部数据可视化体系

柯尼卡美能达软件开发&#xff08;大连&#xff09;有限公司于2007年5月25日注册成立。公司以“洞悉在工作的人们真实情况&#xff0c;探寻他们的愿望&#xff0c;持续提供使人们更加幸福的服务”为使命&#xff0c;致力于系统品质测试服务、软件开发服务、IT安全服务、高级BPO…

2024最新手机软件APP下载排行网站源码 软件下载站PHP源码

源码介绍 这是一款简洁蓝色的手机软件下载应用排行、平台和最新发布网站源码&#xff0c;主要包括主页、APP列表页、APP详情介绍页、新闻资讯列表、新闻详情页、关于我们等模块页面。 软件下载站PHP网站源码&#xff0c;简单的部署上线&#xff0c;访问首页安装程序&#xff…

小程序收银视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

【测开能力提升-Javascript】JavaScript运算符流程结构

1. 递增递减运算符 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>// 前置递增运算符var age10age //类似于ageage1&#xff0c; 先加1后返回值alert(age)// 后置…

总结一些vue3小知识3

1.限制时间选择器只能选择后面的日期 说明&#xff1a;disabled-date属性是一个用来判断该日期是否被禁用的函数&#xff0c;接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 <el-date-picker class"w180" v-model"datas.form.timeDate[0]" …

Shiro安全框架(上)

目录 第一章 权限概述 1、什么是权限 2、身份认证概念-Authentication 【1】什么是认证 【2】对象 2、用户授权概念-Authorization 【1】什么是授权 【2】授权流程 第二章 Shiro概述 1、Shiro简介 【1】什么是Shiro? 【2】Shiro 的特点 2、核心组件 第三章 Shiro…

HormonyOs之 路由简单跳转

Navigation路由相关的操作都是基于页面栈NavPathStack提供的方法进行&#xff0c;每个Navigation都需要创建并传入一个NavPathStack对象&#xff0c;用于管理页面。主要涉及页面跳转、页面返回、页面替换、页面删除、参数获取、路由拦截等功能。 Entry Component struct Index …

八月超市营销活动规划

八月骄阳似火&#xff0c;尽管多地仍笼罩在炎热的夏意之中&#xff0c;但随着立秋节气的到来&#xff0c;以及七夕节、中元节等传统节日的相继而至&#xff0c;为商家们提供了极佳的营销契机。巧妙地根据这些节日节气规划每一周期的营销活动&#xff0c;不仅能营造浓厚的节日氛…

Java面试篇类加载过程详解(吊打面试官)

类加载过程详解 文章目录 类加载过程详解类的生命周期类加载过程1.加载2.验证3.准备4.解析5.初始化6.类卸载 类的生命周期 类从被加载到虚拟机内存中开始到卸载内存为止&#xff0c;它的整个生命周期简单概括加载-验证-准备-解析-初始化-使用-卸载 验证、准备、解析这三个阶段…