当前位置: 首页 > news >正文

水波纹文字效果动画

效果展示

在这里插入图片描述

CSS 知识点

  • text-shadow 属性绘制立体文字
  • clip-path 属性来绘制水波纹

工具网站

CSS clip-path maker 效果编辑器

页面整体结构实现

使用多个 H2 标签来实现水波纹的效果实现,然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。

<div class="liquid"><h2>Water</h2><h2>Water</h2><h2>Water</h2><h2>Water</h2>
</div>

实现基础文字的效果(带阴影)

.liquid h2:nth-child(1) {color: #fff;text-shadow: -2px 2px 0 #183954, -4px 4px 0 #183954, -6px 6px 0 #183954, -8px8px 0 #183954, -10px 10px 0 #183954, -10px 10px 0 #183954,-12px 12px 0 #183954, -14px 14px 0 #183954, -16px 16px 0 #183954, -18px 18px20px rgba(0, 0, 0, 0.5), -18px 18px 30px rgba(0, 0, 0, 0.5), -18px 18px50px rgba(0, 0, 0, 0.5), -18px 18px 150px rgba(0, 0, 0, 0.5);
}

实现水波纹文字动画

使用CSS clip-path maker 效果编辑器来绘制出波浪的clip-path值后复制过来,在结合动画来实现水波纹的效果。

.liquid h2:nth-child(2) {color: #2196f3;opacity: 0.5;animation: animate 3s ease-in-out infinite;
}.liquid h2:nth-child(3) {color: #2196f3;opacity: 0.5;animation: animate 6s ease-in-out infinite;
}.liquid h2:nth-child(4) {color: #2196f3;animation: animate 4s ease-in-out infinite;
}@keyframes animate {0%,100% {clip-path: polygon(0 46%,16% 45%,34% 52%,50% 61%,68% 65%,85% 61%,100% 53%,100% 100%,0 100%);}50% {clip-path: polygon(0 66%,14% 73%,34% 76%,50% 71%,64% 62%,79% 55%,100% 51%,100% 100%,0 100%);}
}

完整代码下载

完整代码下载

相关文章:

水波纹文字效果动画

效果展示 CSS 知识点 text-shadow 属性绘制立体文字clip-path 属性来绘制水波纹 工具网站 CSS clip-path maker 效果编辑器 页面整体结构实现 使用多个 H2 标签来实现水波纹的效果实现&#xff0c;然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。 <div …...

【1.1】神经网络:关于神经网络的介绍

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a; 神经网络&#xff08;随缘更新&#xff09; ✨特色…...

java项目中git的.ignore文件设置

在Git中&#xff0c;ignore是用来指定Git应该忽略的故意不被追踪的文件。它并不影响已经被Git追踪的文件。我们可以通过.ignore文件在Git中指定要忽略的文件。 当我们执行git add命令时&#xff0c;Git会检查.gitignore文件&#xff0c;并自动忽略这些文件和目录。这样可以避免…...

11.3 读图举例

一、低频功率放大电路 图11.3.1所示为实用低频功率放大电路&#xff0c;最大输出功率为 7 W 7\,\textrm W 7W。其中 A \textrm A A 的型号为 LF356N&#xff0c; T 1 T_1 T1​ 和 T 3 T_3 T3​ 的型号为 2SC1815&#xff0c; T 4 T_4 T4​ 的型号为 2SD525&#xff0c; T 2…...

黑马JVM总结(二十八)

&#xff08;1&#xff09;语法糖-foreach &#xff08;2&#xff09;语法糖-switch-string &#xff08;3&#xff09;语法糖-switch-enum &#xff08;4&#xff09;语法糖-枚举类 枚举类 &#xff08;5&#xff09;语法糖-twr1...

2023年DDoS攻击发展趋势的分析和推断

DDoS是一种非常“古老”的网络攻击技术&#xff0c;随着近年来地缘政治冲突对数字经济格局的影响&#xff0c;DDoS攻击数量不断创下新高&#xff0c;其攻击的规模也越来越大。日前&#xff0c;安全网站Latest Hacking News根据DDoS攻击防护服务商Link11的统计数据&#xff0c;对…...

RT-Thread 内存管理(学习二)

内存堆管理应用示例 这是一个内存堆的应用示例&#xff0c;这个程序会创建一个动态的线程&#xff0c;这个线程会动态申请内存并释放&#xff0c;每次申请更大的内存&#xff0c;当申请不到的时候就结束。 #include <rtthread.h>#define THREAD_PRIORITY 25 #defi…...

怎么修改jupyter lab 的工作路径而不是直接再桌面路径打开

要修改Jupyter Lab的工作路径&#xff0c;你可以按照以下步骤操作&#xff1a; 打开终端或命令提示符窗口。 输入 jupyter lab --generate-config 命令来生成Jupyter Lab的配置文件。 找到生成的配置文件&#xff0c;通常会位于 ~/.jupyter/jupyter_notebook_config.py。 使…...

高精度NTP时钟服务器(时间同步服务器)技术方案探讨

高精度NTP时钟服务器&#xff08;时间同步服务器&#xff09;技术方案探讨 高精度NTP时钟服务器&#xff08;时间同步服务器&#xff09;技术方案探讨 四分天下目前&#xff0c;全球的 GPS卫星同步系统处于“四分天下”状态&#xff0c;以美俄两国的系统处于领导地位&#xff…...

LFU 缓存 -- LinkedHashSet

相关题目&#xff1a; 460. LFU 缓存 相关文章 LRU 缓存 – 哈希链表 # 460. LFU 缓存 # Python中和 LinkedHashSet 相似的数据结构 OrderedDict from collections import OrderedDict class LFUCache:# key 到 val 的映射&#xff0c;我们后文称为 KV 表keyToVal {}# key 到…...

用IDEA操作数据库--MySQL

IDEA集成了DataGrip的操作数据库的功能 就可以省略我们下载SQLyog/Navicat/DataGrip这些图形化操作工具了 以下是IDEA的使用 输入数据库的用户和密码...

扫雷游戏的递归解法

目录 一&#xff0c;题目 二&#xff0c;题目接口 三&#xff0c;解题思路 四&#xff0c;解题代码 一&#xff0c;题目 让我们一起来玩扫雷游戏&#xff01; 给你一个大小为 m x n 二维字符矩阵 board &#xff0c;表示扫雷游戏的盘面&#xff0c;其中&#xff1a; M 代表一…...

java练习 day5

一、Nim 游戏 1、题目链接 点击跳转到题目位置 2、代码 class Solution {public boolean canWinNim(int n) {if(n % 4 0){return false;}return true;} }3、知识点 (1) 通过模拟来寻找 规律。 二、区域和检索 - 数组不可变 1、题目链接 点击跳转到题目位置 2、代码 …...

腾讯云轻量和CVM有啥区别?怎么选择服务器配置?

腾讯云轻量服务器和云服务器有什么区别&#xff1f;为什么轻量应用服务器价格便宜&#xff1f;是因为轻量服务器CPU内存性能比云服务器CVM性能差吗&#xff1f;轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境&#xff0c;云服务器CV…...

服务器or虚拟机安装SSH和虚拟机or服务器设置远程服务权限

第一步 服务器/虚拟机安装SSH工具,这是外部SSH终端连接服务器/虚拟机的第一步! sudo apt update && sudo apt upgrade#更新apt sudo apt install openssh-server#安装SSH工具 service ssh status#查看SSh运行状态 sudo systemctl enable --now ssh#运行SSH工具第二步…...

Sentinel入门

文章目录 初始Sentinel雪崩问题服务保护技术对比认识Sentinel微服务整合Sentinel 限流规则快速入门流控模式关联模式链路模式 流控效果warm up排队等待 热点参数限流全局参数限流热点参数限流 隔离和降级FeignClient整合Sentinel线程隔离熔断降级慢调用异常比例、异常数 授权规…...

Mac解压缩软件BetterZip免费版注册码下载

软件介绍 BetterZip免费版是一款适用于Mac系统的解压缩软件&#xff0c;软件具备了专业、实用、简单等特点&#xff0c;它可以让用户更快捷的向压缩文件中添加和删除文件&#xff0c;同时兼容性也十分优秀&#xff0c;支持ZIP &#xff0c; SIT &#xff0c; TAR、BZIP2 &…...

在win10里顺利安装了apache2.4.41和php7.4.29以及mysql8.0.33

一、安装apache和php 最近在学习网站搭建。其中有一项内容是在windows操作系统里搭建apachephp环境。几天前根据一本书的上的说明尝试了一下&#xff0c;在win10操作系统里安装这两个软件&#xff1a;apache2.4.41和php7.4.29&#xff0c;安装以后apche能正常启动&#xff0c;…...

云服务仿真:完全模拟 AWS 服务的本地体验 | 开源日报 No.45

localstack/localstack Stars: 48.7k License: NOASSERTION LocalStack 是一个云服务仿真器&#xff0c;可以在您的笔记本电脑或 CI 环境中以单个容器运行。它提供了一个易于使用的测试/模拟框架&#xff0c;用于开发云应用程序。主要功能包括&#xff1a; 在本地机器上完全…...

css实现不规则图片文字环绕效果

依旧,先上效果图,可以看见,文字环绕这个椭圆形的图片, 依旧是遵循开源精神,代码就直接放下面了 (点个赞或者给个评论啥的吧,我就发现我的文章全是光看不点赞,不评论的的) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&quo…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...