使用css3实现【水波纹扩散效果】

使用css3实现【水波纹扩散效果】

在CSS3中,我利用::before和::after伪元素以及动画(animation)来创建一个简单的水波纹扩散效果。下面是一个基础的示例:

Html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {position: relative;overflow: hidden;
}.wave-effect {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.1);animation: wave 4s ease infinite;
}@keyframes wave {0% {transform: translateX(0); background-position: 0 0;}50% {background-position: 100px 0; transform: translateX(-50px);}100% {background-position: 0 0; transform: translateX(0);}
}
</style>
</head>
<body><div class="container"><div class="wave-effect"></div>
</div></body>
</html>

.wave-effect容器设置了绝对定位,并给它的背景设置了一个线性渐变,同时应用了一个名为wave的动画,模拟了水波向右平移然后回溯的效果。

如何让水波纹扩散到整个屏幕之外的部分?

如果想要让水波纹扩散到屏幕之外,你可以通过改变动画的触发点来实现。在上述示例中,我们使用了transform: translateX(-50%),这会让动画从屏幕中心开始。如果你想让它从屏幕边缘开始扩散,比如底部边缘,你可以调整CSS中的值。

例如,如果你想让波纹从底部扩散并溢出屏幕,可以修改.wave-effect的transform属性,将其改为transform: translateY(-100%),这样当动画运行时,它会从屏幕底部向上移动。然后为了确保背景图像是溢出屏幕的,你需要将height设为 100vh(视口高度),以占据整个可视区域。

以下是相应的CSS部分修改后的代码:

Css
.wave-effect {position: absolute;bottom: 0;left: 0;width: 100%;height: 100vh; /* 使用视口高度 */background-color: rgba(0, 0, 0, 0.1);animation: wave 4s ease infinite;transform: translateY(-100%);
}

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

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

相关文章

Qt基础 | Qt Creator的基本介绍与使用 | 在Visual Studio中创建Qt项目

文章目录 一、Qt Creator的基本介绍与使用1.新建一个项目2.项目的文件组成3.项目文件介绍3.1 项目管理文件3.2 界面文件3.3 主函数文件3.4 窗体相关的文件 4.项目的编译、调试与运行 二、在Visual Studio中创建Qt项目 Qt C开发环境的安装&#xff0c;请参考https://liujie.blog…

maven私有镜像仓库nexus部署使用

maven私有镜像仓库nexus部署使用 1、Nexus部署 #查找镜像 docker search sonatype/nexus3 #拉取镜像 docker pull sonatype/nexus3 #持久化目录 mkdir -p /data/nexus/data chmod 777 -R /data/nexus/data #启动服务 docker run -d --name nexus3 -p 8081:8081 --restart alw…

MyBatis where标签内嵌foreach标签查询报错‘缺失右括号‘或‘命令未正确结束‘

MyBatis <where>标签内嵌<foreach>标签查询报错’缺失右括号’或’命令未正确结束’ <where>标签内嵌<foreach>标签 截取一段脱敏xml&#xff0c;写明大概意思 <select id"queryLogByIds" resultMap"BaseResultMap">SELE…

深度学习基础:Numpy 数组包

数组基础 在使用导入 Numpy 时&#xff0c;通常给其一个别名 “np”&#xff0c;即 import numpy as np 。 数据类型 整数类型数组与浮点类型数组 为了克服列表的缺点&#xff0c;一个 Numpy 数组只容纳一种数据类型&#xff0c;以节约内存。为方便起见&#xff0c;可将 Nu…

lnmp+DISCUZ+WORDPRESS

lnmpDISCUZWORDPRESS lnmpDISCUZ&#xff08;论坛的一个服务&#xff09; l&#xff1a;linux操作系统 n&#xff1a;nginx前端页面的web服务 php&#xff1a;动态请求转发的中间件 mysql&#xff1a;数据库 保存用户和密码以及论坛的相关内容 mysql8.0.30安装&#xff1a…

html(抽奖设计)

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>抽奖</title><style type"text/css">* {margin: 0;padding: 0;}.container {width: 800px;height: 800px;border: 1px dashed red;position: absolut…

数字营销以打造“会员体系”为主要目标的好处和优势

​蚓链数字化营销实践观察&#xff1a;在数字化时代&#xff0c;企业的营销方式发生了深刻的变革。会员体系作为一种常见的营销策略&#xff0c;在数字营销领域中发挥着越来越重要的作用。 首先&#xff0c;我们来总结一下会员体系的特点和优势 &#xff08;一&#xff09;个性…

7/13 - 7/15

vo.setId(rs.getLong("id"))什么意思&#xff1f; vo.setId(rs.getLong("id")); 这行代码是在Java中使用ResultSet对象&#xff08;通常用于从数据库中检索数据&#xff09;获取一个名为"id"的列&#xff0c;并将其作为long类型设置为一个对象…

手撕排序算法:插入排序

文章目录 1.算法思想2.算法分析2.1时间复杂度2.2 空间复杂度 3.算法的优缺点3.1 优点3.2缺点 4.优化方案5.代码实现6.实战6.1力扣1491.去掉最低工资和最高工资后的工资平均值6.2力扣1619.删除某些元素后的数组均值6.3 力扣1984.学生分数的最小差值 插入排序(Insertion Sort)是一…

c语言中的字符串函数

strstr函数 函数介绍 strstr 用于在一个字符串中查找另一个字符串的首次出现。 我们来看这个函数的参数名字&#xff1a;haysytack&#xff08;干草堆&#xff09;needle&#xff08;针&#xff09;,这个其实就是外国的一句谚语&#xff1a;在干草堆中找一根针&#xff0c;就…

抗量子密码算法:保障未来信息安全的新盾牌

随着量子计算的迅猛发展&#xff0c;传统加密算法正面临着前所未有的挑战。量子计算机利用量子比特的特殊性质&#xff0c;能在极短时间内破解目前广泛使用的公钥加密体系&#xff0c;如RSA、ECC等。这使得我国及全球的信息安全体系遭受严重威胁。为了应对这一挑战&#xff0c;…

unity宏编译版本

在写c程序的时候我们通常可以用不同的宏定义来控制不同版本的编译内容&#xff0c;最近有个需求就是根据需要编译一个完全体验版本&#xff0c;就想到了用vs的那套方法。经过研究发现unity也有类似的控制方法。 注意这里设置完后要点击右下的应用&#xff0c;我起先就没有设置…

09 函数基础

目录 一、定义一个函数 二、调用函数 三、函数的参数 1.形参和实参 2. 参数的分类 3.参数默认值 4.参数类型说明 5.不定长参数 四、函数的返回值 1.定义 2.关键字return 五、变量的作用域 六、匿名函数 七、实参高阶函数 1.定义 2.常见实参高阶函数 max、min、so…

10.1 JSP语言入门

JSP语言入门 目录一、 基础概念1. 什么是JSP&#xff1f;2. 工作原理3. 基本语法 二、 表达式语言&#xff08;EL&#xff09;1. 简介2. 语法 三、 JSTL&#xff08;JSP Standard Tag Library&#xff09;1. 简介2. 核心标签库3. 常用标签 四、 高级话题1. 会话管理2. 自定义标…

React@16.x(58)Redux@4.x(7)- 实现 combineReducers

目录 1&#xff0c;分析2&#xff0c;实现2.1&#xff0c;简单实现2.2&#xff0c;参考源码具体实现实现 1&#xff0c;分析 大型项目中&#xff0c;数据和操作都比较复杂&#xff0c;所以会对 reducer 进行细分管理。 combineReducers 的作用&#xff1a;结合多个 reducer。…

【学习笔记】无人机(UAV)在3GPP系统中的增强支持(十一)-无人机服务可用性用例需求

引言 本文是3GPP TR 22.829 V17.1.0技术报告&#xff0c;专注于无人机&#xff08;UAV&#xff09;在3GPP系统中的增强支持。文章提出了多个无人机应用场景&#xff0c;分析了相应的能力要求&#xff0c;并建议了新的服务级别要求和关键性能指标&#xff08;KPIs&#xff09;。…

Python:while循环

while循环体 while 条件: 符合条件执行语句 .... 执行完后需执行的语句 # while循环 i1 while i<5:print(i)ii1 print("Done") test. 做一颗圣诞树吧 答案&#xff1a; # while循环 i 1 j5 while i < 5:print( * j* * i)i i 2jj-1 print("Done"…

护佑未来!引领儿童安全新时代的AI大模型

引领儿童安全新时代的AI大模型 一. 前言1.1 AI在儿童安全方面的潜在作用1.2 实时监控与预警1.3 个性化安全教育与引导1.4 家长监护与安全意识提升 二. AI大模型的优势2.1. 保护儿童隐私和安全的重要性2.2. AI大模型如何应用于儿童安全领域2.1 儿童内容过滤2.2.1 儿童行为监测 2…

视觉/AIGC面经->多模态

1.ocr检测如何做?qwen的文本检测是否合理? paligemma: <loc0110><loc0124><loc0224><loc0389> plate ; <loc0244><loc0130><loc0281><loc0430> plate ; <loc0364><loc0820><loc0403><loc0951> pl…

代码检查规则语言CodeNavi中代码语句的节点和节点属性

本文分享至华为云社区《CodeNavi 中代码语句的节点和节点属性》。作者&#xff1a;Uncle_Tom 1. 前期回顾 《寻找适合编写静态分析规则的语言》 根据代码检查中的一些痛点&#xff0c;提出了希望寻找一种适合编写静态分析规则的语言。 可以满足用户对代码检查不断增加的各种需求…