水波纹文字效果动画

效果展示

在这里插入图片描述

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%);}
}

完整代码下载

完整代码下载

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

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

相关文章

CSS基础语法之盒子模型

目录 一、 选择器 1.1 结构伪类选择器 1.1.1基本使用 1.1.2 :nth-child(公式) 1.2 伪元素选择器 二、 PxCook 三、盒子模型 3.1 盒子模型-组成 3.2 边框线 3.2.1四个方向 3.2.2 单方向边框线 3.3 内边距 3.4 尺寸计算 3.5 外边距+版心居中 3.6 清除默认样式 3.7…

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…

【从0开始配置前后端项目】——Docker环境配置

1. 准备一台纯净的服务器 镜像&#xff1a;CentOS 7.9 64位 CPU & 内存&#xff1a;2核2G 系统盘&#xff1a;60GB 峰值带宽&#xff1a;30Mbps 流量包&#xff1a;600GB / 600GB 2. 安装Docker 2.1 卸载旧的版本 $ sudo yum remove docker \docker-client \docker-cl…

【ONE·Linux || 多线程(二)】

总言 多线程&#xff1a;生产者消费者模型与两种实现方式&#xff08;条件变量、信号量&#xff09;、线程池。 文章目录 总言4、生产者消费者模型4.1、基本概念4.2、基于BlockingQueue的生产者消费者模型&#xff08;理解条件变量&#xff09;4.2.1、单生产者单消费者模式&am…

【juc】countdownlatch实现游戏进度

目录 一、截图示例二、代码示例 一、截图示例 二、代码示例 package com.learning.countdownlatch;import java.util.Arrays; import java.util.Random; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ExecutorService; import java.util.concurr…

爱普生LQ1900KIIH复位方法

爱普生EPSON 1900KIIH是一部通用针式打印机&#xff0c;136列&#xff08;10cpi下&#xff09;的打印宽度&#xff0c;缓冲区128KB&#xff0c;打印速度为270字/秒。 打印机类型 打印方式&#xff1a;24针击打式点阵打印、打印方向&#xff1a;双向逻辑查找、安全规格标准&am…

Dubbo-CVE-2020-1948

APache Dubbo简介 Dubbo是一个分布式服务框架&#xff0c;致力于提供高性能和透明化的RPC远程服务调用方案&#xff0c;以及SOA服务治理方案。简单的说&#xff0c;dubbo就是个服务框架&#xff0c;如果没有分布式的需求&#xff0c;其实是不需要用的&#xff0c;只有在分布式…

人体姿态标注

人体姿态标注 一 标注工具labelme1.1 安装方式1.2 界面说明 二 数据集准备以下每张图片的命名方式&#xff1a;状态_学号_序号.jpg (注意 一定是jpg格式) 保存到一个文件夹中&#xff0c;便于标注。 例如&#xff1a;FALL_0000_0001.jpg 站立数据(UP)&#xff1a;不同方向&…

MySQL增删查改(进阶1)

一、数据库约束 约束&#xff1a;按照一定条件进行规范的做事&#xff1b; 表定义的时候&#xff0c;某些字段保存的数据需要按照一定的约束条件&#xff1b; 1.null约束 字段null&#xff1a;该字段可以为空&#xff1b;not null&#xff1a;该字段不能为空不指定的话就是…

优优嗨聚集团:OTC药品能否纳入报销成为各方关注焦点,对OTC医疗有何影响

随着医疗费用的不断上涨&#xff0c;各方对于非处方药&#xff08;OTC&#xff09;能否纳入报销的关注度也在不断提升。OTC药品是指无需医生处方即可购买的药品&#xff0c;具有方便快捷、安全有效的特点。然而&#xff0c;对于是否将OTC药品纳入报销范围&#xff0c;各方看法不…

NewStarCTF 2023 WEEK1|PWN ret2text

拖进IDA&#xff0c;查看 int __cdecl main(int argc, const char **argv, const char **envp) {char buf[32]; // [rsp0h] [rbp-20h] BYREFinit();puts("Welcome to NewStar CTF!!");puts("Show me your magic");read(0, buf, 0x100uLL);return 0; } ma…

Java版本+企业电子招投标系统源代码之电子招投标系统建设的重点和未来趋势

一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标立项申请入口、用户可以保存为草稿、提交。 3、采购立项列表 功能点&#xff1a;对草稿进行编辑&#x…

46 二叉树展开为链表

二叉树展开为链表 理解题意&#xff1a;前序遍历的N种写法题解1 前序遍历题解2 反前序遍历(代码简洁)题解3 类似旋转的方法题解4 迭代题解5 同时遍历改左右子树 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNo…

Day-05 CentOS7.5 安装 Docker

参考 &#xff1a; Install Docker Engine on CentOS | Docker DocsLearn how to install Docker Engine on CentOS. These instructions cover the different installation methods, how to uninstall, and next steps.https://docs.docker.com/engine/install/centos/ Doc…

让照片人物开口说话,SadTalker 安装及使用(避坑指南)

AI技术突飞猛进&#xff0c;不断的改变着人们的工作和生活。数字人直播作为新兴形式&#xff0c;必将成为未来趋势&#xff0c;具有巨大的、广阔的、惊人的市场前景。它将不断融合创新技术和跨界合作&#xff0c;提供更具个性化和多样化的互动体验&#xff0c;成为未来的一种趋…

[C++基础]-多态

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正。 本期学习目标&am…

数据库配置mysql5.7

1 创建数据库 """ 1.管理员连接数据库 mysql -uroot -proot2.创建数据库 create database hello default charsetutf8;3.查看用户 select user,host,password from mysql.user;# 5.7往后的版本 select user,host,authentication_string from mysql.user; "…

力扣-345.反转字符串中的元音字母

Idea 将s中的元音字母存在字符串sv中&#xff0c;并且使用一个数组依次存储元音字母的下标。 然后将字符串sv进行反转&#xff0c;并遍历元音下标数组&#xff0c;将反转后的字符串sv依次插入到源字符串s中 AC Code class Solution { public:string reverseVowels(string s) {…

【进阶C语言】数组笔试题解析

本节内容以刷题为主&#xff0c;大致目录&#xff1a; 1.一维数组 2.字符数组 3.二维数组 学完后&#xff0c;你将对数组有了更全面的认识 在刷关于数组的题目前&#xff0c;我们先认识一下数组名&#xff1a; 数组名的意义&#xff1a;表示数组首元素的地址 但是有两个例外…

强化学习环境 - robogym - 学习 - 3

强化学习环境 - robogym - 学习 - 3 文章目录 强化学习环境 - robogym - 学习 - 3项目地址为什么选择 robogymObservation - 观测信息Action - 动作信息Initialization - 初始状态设置 项目地址 https://github.com/openai/robogym 为什么选择 robogym 自己的项目需要做一些机…