水波纹文字效果动画
效果展示

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 标签来实现水波纹的效果实现,然后使用clip-path结合动画属性一起来进行波浪的起伏动画实现。 <div …...
【1.1】神经网络:关于神经网络的介绍
✅作者简介:大家好,我是 Meteors., 向往着更加简洁高效的代码写法与编程方式,持续分享Java技术内容。 🍎个人主页:Meteors.的博客 💞当前专栏: 神经网络(随缘更新) ✨特色…...
java项目中git的.ignore文件设置
在Git中,ignore是用来指定Git应该忽略的故意不被追踪的文件。它并不影响已经被Git追踪的文件。我们可以通过.ignore文件在Git中指定要忽略的文件。 当我们执行git add命令时,Git会检查.gitignore文件,并自动忽略这些文件和目录。这样可以避免…...
11.3 读图举例
一、低频功率放大电路 图11.3.1所示为实用低频功率放大电路,最大输出功率为 7 W 7\,\textrm W 7W。其中 A \textrm A A 的型号为 LF356N, T 1 T_1 T1 和 T 3 T_3 T3 的型号为 2SC1815, T 4 T_4 T4 的型号为 2SD525, T 2…...
黑马JVM总结(二十八)
(1)语法糖-foreach (2)语法糖-switch-string (3)语法糖-switch-enum (4)语法糖-枚举类 枚举类 (5)语法糖-twr1...
2023年DDoS攻击发展趋势的分析和推断
DDoS是一种非常“古老”的网络攻击技术,随着近年来地缘政治冲突对数字经济格局的影响,DDoS攻击数量不断创下新高,其攻击的规模也越来越大。日前,安全网站Latest Hacking News根据DDoS攻击防护服务商Link11的统计数据,对…...
RT-Thread 内存管理(学习二)
内存堆管理应用示例 这是一个内存堆的应用示例,这个程序会创建一个动态的线程,这个线程会动态申请内存并释放,每次申请更大的内存,当申请不到的时候就结束。 #include <rtthread.h>#define THREAD_PRIORITY 25 #defi…...
怎么修改jupyter lab 的工作路径而不是直接再桌面路径打开
要修改Jupyter Lab的工作路径,你可以按照以下步骤操作: 打开终端或命令提示符窗口。 输入 jupyter lab --generate-config 命令来生成Jupyter Lab的配置文件。 找到生成的配置文件,通常会位于 ~/.jupyter/jupyter_notebook_config.py。 使…...
高精度NTP时钟服务器(时间同步服务器)技术方案探讨
高精度NTP时钟服务器(时间同步服务器)技术方案探讨 高精度NTP时钟服务器(时间同步服务器)技术方案探讨 四分天下目前,全球的 GPS卫星同步系统处于“四分天下”状态,以美俄两国的系统处于领导地位ÿ…...
LFU 缓存 -- LinkedHashSet
相关题目: 460. LFU 缓存 相关文章 LRU 缓存 – 哈希链表 # 460. LFU 缓存 # Python中和 LinkedHashSet 相似的数据结构 OrderedDict from collections import OrderedDict class LFUCache:# key 到 val 的映射,我们后文称为 KV 表keyToVal {}# key 到…...
用IDEA操作数据库--MySQL
IDEA集成了DataGrip的操作数据库的功能 就可以省略我们下载SQLyog/Navicat/DataGrip这些图形化操作工具了 以下是IDEA的使用 输入数据库的用户和密码...
扫雷游戏的递归解法
目录 一,题目 二,题目接口 三,解题思路 四,解题代码 一,题目 让我们一起来玩扫雷游戏! 给你一个大小为 m x n 二维字符矩阵 board ,表示扫雷游戏的盘面,其中: 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有啥区别?怎么选择服务器配置?
腾讯云轻量服务器和云服务器有什么区别?为什么轻量应用服务器价格便宜?是因为轻量服务器CPU内存性能比云服务器CVM性能差吗?轻量应用服务器适合中小企业或个人开发者搭建企业官网、博客论坛、微信小程序或开发测试环境,云服务器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系统的解压缩软件,软件具备了专业、实用、简单等特点,它可以让用户更快捷的向压缩文件中添加和删除文件,同时兼容性也十分优秀,支持ZIP , SIT , TAR、BZIP2 &…...
在win10里顺利安装了apache2.4.41和php7.4.29以及mysql8.0.33
一、安装apache和php 最近在学习网站搭建。其中有一项内容是在windows操作系统里搭建apachephp环境。几天前根据一本书的上的说明尝试了一下,在win10操作系统里安装这两个软件:apache2.4.41和php7.4.29,安装以后apche能正常启动,…...
云服务仿真:完全模拟 AWS 服务的本地体验 | 开源日报 No.45
localstack/localstack Stars: 48.7k License: NOASSERTION LocalStack 是一个云服务仿真器,可以在您的笔记本电脑或 CI 环境中以单个容器运行。它提供了一个易于使用的测试/模拟框架,用于开发云应用程序。主要功能包括: 在本地机器上完全…...
css实现不规则图片文字环绕效果
依旧,先上效果图,可以看见,文字环绕这个椭圆形的图片, 依旧是遵循开源精神,代码就直接放下面了 (点个赞或者给个评论啥的吧,我就发现我的文章全是光看不点赞,不评论的的) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&quo…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
SQL注入篇-sqlmap的配置和使用
在之前的皮卡丘靶场第五期SQL注入的内容中我们谈到了sqlmap,但是由于很多朋友看不了解命令行格式,所以是纯手动获取数据库信息的 接下来我们就用sqlmap来进行皮卡丘靶场的sql注入学习,链接:https://wwhc.lanzoue.com/ifJY32ybh6vc…...
【阅读笔记】MemOS: 大语言模型内存增强生成操作系统
核心速览 研究背景 研究问题:这篇文章要解决的问题是当前大型语言模型(LLMs)在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色,但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成(RA…...
GB/T 43887-2024 核级柔性石墨板材检测
核级柔性石墨板材是指以可膨胀石墨为原料、未经改性和增强、用于核工业的核级柔性石墨板材。 GB/T 43887-2024核级柔性石墨板材检测检测指标: 测试项目 测试标准 外观 GB/T 43887 尺寸偏差 GB/T 43887 化学成分 GB/T 43887 密度偏差 GB/T 43887 拉伸强度…...
以太网PHY布局布线指南
1. 简介 对于以太网布局布线遵循以下准则很重要,因为这将有助于减少信号发射,最大程度地减少噪声,确保器件作用,最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确,然…...
Redis专题-实战篇一-基于Session和Redis实现登录业务
GitHub项目地址:https://github.com/whltaoin/redisLearningProject_hm-dianping 基于Session实现登录业务功能提交版本码:e34399f 基于Redis实现登录业务提交版本码:60bf740 一、导入黑马点评后端项目 项目架构图 1. 前期阶段2. 后续阶段导…...
