一：文本水波动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本水波动画</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 对所有元素应用样式：移除默认的外边距和内边距，设置盒模型为border-box，使元素的总宽度和高度包括内边距和边框 */
body{
display: flex;
/* 将body设置为弹性盒模型，用于布局 */
justify-content: center;
/* 水平方向上居中对齐子元素 */
align-items: center;
/* 垂直方向上居中对齐子元素 */
min-height: 100vh;
/* 设置body的最小高度为视口高度的100% */
background: #f5efef;
/* 设置背景颜色为浅灰色 */
}
.container {
position: relative;
width: 100%; /* 使容器宽度占满视口 */
height: 100%; /* 使容器高度占满视口，但这可能需要根据实际情况调整 */
display: flex;
justify-content: center;
align-items: center;
}
.container h2{
position: absolute;
/* 将h2元素设置为绝对定位 */
font-size: 6em;
/* 设置字体大小为8em，em是相对于当前对象内文本的字体尺寸 */
transform: rotate(0deg); /* 不旋转文本 */
display: inline-block; /* 使h2元素成为行内块元素，以便水平排列 */
}
.container h2:nth-child(1){
color: transparent;
/* 设置第一个h2元素的文本颜色为透明 */
-webkit-text-stroke: 4px skyblue;
/* 为文本添加4px宽的天蓝色描边 */
}
.container h2:nth-child(2){
color: skyblue;
/* 设置第二个h2元素的文本颜色为天蓝色 */
animation: animate 4s ease-in-out infinite;
/* 应用名为animate的动画，持续4秒，使用ease-in-out缓动效果，无限循环 */
}
@keyframes animate {
/* 定义名为animate的关键帧动画 */
0%,100%{
-webkit-clip-path: polygon(0 51%, 18% 72%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%);
clip-path: polygon(0 51%, 8% 82%, 46% 73%, 65% 60%, 82% 67%, 100% 46%, 99% 98%, 0% 99%);
/* 在动画的开始和结束时，使用多边形裁剪路径定义文本的显示区域 */
}
50%{
-webkit-clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%);
clip-path: polygon(0 55%, 16% 37%, 35% 53%, 60% 40%, 80% 57%, 100% 46%, 99% 98%, 0% 99%);
/* 在动画的中点，使用另一个多边形裁剪路径定义文本的显示区域，实现文本的“变换”效果 */
}
}
</style>
</head>
<body>
<div class="container">
<h2>这是一个标题</h2>
<!-- 第一个h2元素，将应用透明文本和天蓝色描边的样式 -->
<h2>这是一个标题</h2>
<!-- 第二个h2元素，将应用天蓝色文本和动画效果 -->
</div>
</body>
</html>
二：文本流光动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>文本流光效果</title>
<style>
body, html {
height: 100%;
/* 设置body和html元素的高度为视口的100% */
margin: 0;
/* 移除body和html元素的外边距 */
display: flex;
/* 将body和html元素的显示方式设置为弹性盒模型，便于布局 */
justify-content: center;
/* 在水平方向上居中对齐子元素 */
align-items: center;
/* 在垂直方向上居中对齐子元素 */
}
.app{
background-color: #ffffff;
/* 设置.app元素的背景颜色为白色 */
position: relative;
/* 设置.app元素的定位方式为相对定位，使其成为绝对定位元素的参考点 */
display: flex;
/* 将.app元素的显示方式设置为弹性盒模型 */
justify-content: center;
/* 在水平方向上居中对齐.app内的子元素 */
align-items: center;
/* 在垂直方向上居中对齐.app内的子元素 */
}
.text{
font-weight: 600;
/* 设置.text元素的字体粗细为600，即半粗体 */
font-size: 40px;
/* 设置.text元素的字体大小为18像素 */
color: transparent;
/* 设置.text元素的文本颜色为透明，这样背景渐变才会显示出来 */
letter-spacing: 4px;
/* 设置.text元素的字符间距为4像素 */
margin: 0;
/* 移除.text元素的外边距 */
padding: 0 16px;
/* 设置.text元素的内边距为上下0像素，左右16像素 */
background: linear-gradient(to right, #000 0, #2dce30 20%, #000 40%);
/* 设置.text元素的背景为线性渐变，从黑色渐变到绿色再渐变回黑色 */
background-position: -32px 0;
/* 设置背景渐变的位置，初始时向左偏移32像素，以便动画开始时能看到渐变效果 */
-webkit-background-clip: text;
/* 使用-webkit-前缀的CSS属性，将背景裁剪为文本的形状 */
animation: eff 3s linear infinite;
/* 应用名为eff的动画，持续3秒，使用线性速度，无限循环 */
}
@keyframes eff{
/* 定义名为eff71的关键帧动画 */
to{
background-position: 500px 0;
/* 动画结束时，设置背景渐变的位置向右移动到500像素，从而创建流光效果 */
}
}
</style>
</head>
<body>
<!-- body标签内包含网页的主要内容 -->
<div class="app">
<!-- 创建一个div元素，并为其添加.app类，以便应用相应的CSS样式 -->
<p class="text">这是一个标题</p >
</div>
</body>
</html>
三：文本灯照动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wen {
display: flex;
/* 使用Flexbox布局 */
justify-content: center;
/* 使其子元素在主轴方向上居中对齐 */
padding: 100px 0 60px;
/* 设置内边距，上为100px，左右为0，下为60px */
position: relative;
/* 设置元素的定位方式为相对定位 */
width: 100%
}
.wen p {
color: #222;
/* 设置文本颜色为深灰色 */
font-size: 64px;
/* 设置字体大小为64px */
font-weight: 700;
/* 设置字体粗细为700（粗体） */
position: relative
}
.wen p:after {
animation: wen 8s ease-in-out infinite;
/* 应用名为wen的动画，时长8秒，缓动效果为ease-in-out，无限循环 */
-webkit-background-clip: text;
/* 使用背景图像作为文本颜色填充 */
background-image: linear-gradient(90deg, #ecbe48, #86ef44, #08ead7);
/* 设置背景图像为线性渐变，90度方向，颜色依次为#ecbe48, #86ef44, #08ead7 */
-webkit-clip-path: ellipse(60px 60px at 0 50%);
/* 使用Webkit私有属性，将背景图像裁剪为椭圆形状，椭圆中心在0% 50% */
clip-path: ellipse(60px 60px at 0 50%);
/* 将背景图像裁剪为椭圆形状，椭圆中心在0% 50%，标准属性 */
color: #0000;
/* 设置文本颜色（这里实际上不起作用，因为背景裁剪已覆盖） */
content: attr(data-text);
/* 设置伪元素的内容为p标签的data-text属性的值 */
left: 0;
/* 设置伪元素的左边距为0 */
position: absolute;
/* 设置伪元素的定位方式为绝对定位 */
top: 0
}
@keyframes wen {
50% {
/* 动画进行到50%时 */
-webkit-clip-path: ellipse(60px 60px at 100% 50%);
/* 使用Webkit私有属性，将背景图像裁剪为椭圆形状，椭圆中心在100% 50% */
clip-path: ellipse(60px 60px at 100% 50%);
/* 将背景图像裁剪为椭圆形状，椭圆中心在100% 50%，标准属性 */
}
to {
/* 动画结束时 */
-webkit-clip-path: ellipse(60px 60px at 0 50%);
/* 使用Webkit私有属性，将背景图像裁剪为椭圆形状，椭圆中心在0% 50% */
clip-path: ellipse(60px 60px at 0 50%);
/* 将背景图像裁剪为椭圆形状，椭圆中心在0% 50%，标准属性 */
}
}
</style>
</head>
<body>
<div class="wen">
<p data-text="这是一个标题">这是一个标题</p>
</div>
</body>
</html>
四：文本发光动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本发光动画</title>
<style>
body, html {
width: 100%;
/* 设置宽度为100% */
height: 100%;
/* 设置高度为100% */
overflow: hidden;
/* 隐藏滚动条，防止内容溢出 */
font-family: 'Arial', sans-serif;
/* 设置字体为Arial，如果不可用则使用无衬线字体 */
background-color: #212121;
/* 设置背景色为深灰色 */
}
.content {
display: flex;
flex-direction: column;
/* 子元素沿列方向排列 */
justify-content: center;
/* 使其子元素在主轴（这里是垂直方向）上居中对齐 */
align-items: center;
/* 使其子元素在交叉轴（这里是水平方向）上居中对齐 */
height: 100%;
/* 设置高度为100%，相对于父元素 */
text-align: center;
/* 设置文本对齐方式为居中 */
color: white;
/* 设置文本颜色为白色 */
}
.text {
font-size: 5rem;
/* 设置字体大小为5rem */
margin-bottom: 2rem;
/* 设置底部外边距为2rem */
animation: text-flicker 1s infinite;
/* 应用名为text-flicker的动画，时长1秒，无限循环 */
}
.animate {
animation: shadow-pulse 2s infinite;
/* 应用名为shadow-pulse的动画，时长2秒，无限循环 */
}
@keyframes shadow-pulse {
0% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b, 0 0 40px #ff6b6b, 0 0 50px #ff6b6b, 0 0 60px #ff6b6b;
/* 设置文本阴影，多个阴影层叠形成发光效果 */
}
50% {
/* 动画进行到50%时的样式 */
text-shadow: 0 0 10px #fff, 0 0 20px #9f65f0, 0 0 30px #f06595, 0 0 40px #f06595, 0 0 50px #f06595, 0 0 60px #f06595;
/* 改变阴影颜色，形成脉冲效果 */
}
100% {
/* 动画结束时的样式，与0%时相同，形成循环 */
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b, 0 0 40px #ff6b6b, 0 0 50px #ff6b6b, 0 0 60px #ff6b6b;
}
}
</style>
</head>
<body>
<div class="content">
<h1 class="text animate">这是一个标题</h1>
</div>
</body>
</html>
五：文本左右晃动动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本左右晃动动画</title>
<style>
body {
font-family: Arial, sans-serif; /* 设置字体为Arial，如果不可用则使用sans-serif */
text-align: center; /* 使body内的内容水平居中 */
display: flex; /* 使用Flexbox布局 */
flex-direction: column; /* 垂直布局，子元素从上到下排列 */
align-items: center; /* 垂直居中 */
margin: 0; /* 移除body的外边距 */
padding-top: 50px; /* 设置body顶部的内边距为50px，用于调整h1与顶部的距离 */
}
h1 {
font-size: 48px; /* 设置字体大小为48像素 */
font-weight: 600; /* 设置字体粗细为600，介于正常和粗体之间 */
animation: rotate 0.3s ease infinite; /* 应用名为rotate的动画，持续0.3秒，使用ease缓动函数，无限次循环 */
width: fit-content; /* 确保h1的宽度适应其内容，而不是尽可能宽 */
margin-bottom: 20px; /* 增加h1与下方内容之间的垂直间距 */
}
@keyframes rotate {
0% {
transform: rotate(0); /* 动画开始时，元素不旋转 */
}
20% {
transform: rotate(-2deg); /* 动画进行到20%时，元素逆时针旋转2度 */
}
60% {
transform: rotate(0); /* 动画进行到60%时，元素回到初始位置，不旋转 */
}
80% {
transform: rotate(2deg); /* 动画进行到80%时，元素顺时针旋转2度 */
}
100% {
transform: rotate(0);
}
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>
六：文本滚动动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本滚动动画</title>
<style>
body {
background-color: #fff; /* 背景颜色为白色 */
color: #bb1ba6; /* 文本颜色 */
font-family: Arial, sans-serif; /* 字体样式 */
}
p {
margin: 0; /* 段落外边距为0 */
padding: 0; /* 段落内边距为0 */
}
.container {
width: 500px; /* 容器宽度 */
margin: 50px auto; /* 外边距，自动水平居中 */
line-height: 1.6; /* 行高 */
text-indent: 2em; /* 首行缩进 */
position: relative; /* 相对定位，为子元素提供定位上下文 */
overflow: hidden; /* 溢出隐藏 */
}
.text-container {
position: relative; /* 相对定位 */
white-space: nowrap; /* 文本不换行 */
overflow: hidden; /* 溢出隐藏 */
width: 100%; /* 宽度占满父容器 */
}
.text {
display: inline-block; /* 行内块元素 */
padding-left: 100%; /* 初始时通过内边距将文本移出视口 */
animation: slide-in 20s linear infinite, erase 10s linear 10s infinite;
/* 动画：滑入10秒，擦除10秒，无限循环 */
}
@keyframes slide-in {
from {
transform: translateX(-100%); /* 初始位置在视口左侧外 */
}
to {
transform: translateX(0); /* 结束位置在视口内 */
}
}
/*!* 擦除器样式 *!*/
.eraser {
position: absolute; /* 绝对定位 */
top: 0; /* 顶部对齐父容器 */
left: 0; /* 左侧对齐父容器 */
width: 0; /* 初始宽度为0 */
height: 100%; /* 高度占满父容器 */
background: white; /* 背景颜色为白色，用于遮盖文本 */
animation: erase-width 20s linear 10s infinite;
/* 动画：宽度从0增加到100%，10秒后开始，无限循环 */
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 文本容器 -->
<div class="text-container">
<!-- 文本 -->
<div class="text">
这是一个标题；这是一个标题；这是一个标题；这是一个标题；这是一个标题；这是一个标题
</div>
</div>
<!-- 擦除器 -->
<div class="eraser"></div>
</div>
</body>
</html>
七：文本擦除显现动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本擦除显现动画</title>
<style>
body {
background-color: #fff; /* 设置背景颜色为白色 */
color: #bb1ba6; /* 设置文本颜色为粉色 */
font-family: Arial, sans-serif; /* 设置字体为Arial，如果不可用则使用sans-serif */
}
p {
margin: 0; /* 移除段落的外边距 */
padding: 0; /* 移除段落的内边距 */
}
.container {
width: 500px; /* 设置容器的宽度为500像素 */
margin: 50px auto; /* 设置容器的外边距，自动水平居中 */
line-height: 1.6; /* 设置行高为1.6倍 */
text-indent: 2em; /* 设置首行缩进为2个字符的宽度 */
position: relative; /* 设置容器的定位方式为相对定位 */
overflow: hidden; /* 确保内容不超出容器范围，超出部分隐藏 */
height: 200px; /* 设置容器的高度为200像素 */
}
.eraser {
position: absolute; /* 设置擦除层的定位方式为绝对定位，相对于最近的已定位祖先元素 */
top: 0; /* 设置擦除层的顶部与容器顶部对齐 */
left: 0; /* 设置擦除层的左侧与容器左侧对齐 */
width: 100%; /* 设置擦除层的宽度为容器的100% */
height: 100%; /* 设置擦除层的高度为容器的100% */
background: white; /* 设置擦除层的背景颜色为白色，与文本颜色形成对比以实现擦除效果 */
animation: erase 10s linear forwards;
/* 应用名为erase的动画，持续10秒，使用线性速度曲线，动画结束后保持最后一帧的状态 */
}
@keyframes erase {
from {
transform: translateX(-100%); /* 动画开始时，擦除层位于容器左侧的外部 */
}
to {
transform: translateX(100%); /* 动画结束时，擦除层移动到容器右侧的外部，从而实现从左到右的擦除效果 */
}
}
</style>
</head>
<body>
<div class="container">
<p>
测试文本测试文本测试文本，测试文本测试文本测试文本，测试文本测试文本测试文本，
测试文本测试文本测试文本，测试文本测试文本测试文本，测试文本测试文本测试文本，
测试文本测试文本测试文本，测试文本测试文本测试文本，测试文本测试文本测试文本，
</p>
<div class="eraser"></div>
</div>
</body>
</html>
八：文本逐行显现动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本逐行显现动画</title>
<style>
body {
background-color: #fff; /* 设置背景颜色为白色 */
color: #bb1ba6; /* 设置文本颜色 */
font-family: Arial, sans-serif; /* 设置字体 */
}
.container {
width: 500px; /* 设置容器宽度 */
margin: 50px auto; /* 设置容器外边距，自动水平居中 */
overflow: hidden; /* 隐藏溢出内容 */
position: relative; /* 设置相对定位 */
}
p {
margin: 0; /* 去除段落默认的外边距 */
padding: 0; /* 去除段落默认的内边距 */
line-height: 1.6; /* 设置行高 */
text-indent: 2em; /* 设置首行缩进 */
opacity: 0; /* 初始透明度为0 */
animation: appear 1s forwards; /* 应用显现动画，持续1秒，动画结束后保持最后一帧状态 */
animation-delay: calc(var(--line-index) * 1s);
/* 动画延迟，根据每行的--line-index变量计算 */
animation-fill-mode: forwards; /* 确保动画结束后保持最终状态 */
position: relative; /* 设置相对定位 */
z-index: 1; /* 设置元素的堆叠顺序 */
}
p:nth-child(1) {
--line-index: 0; } /* 为第一行设置自定义属性--line-index为0 */
p:nth-child(2) {
--line-index: 1; } /* 为第二行设置自定义属性--line-index为1 */
p:nth-child(3) {
--line-index: 2; } /* 为第三行设置自定义属性--line-index为2 */
@keyframes appear {
to {
opacity: 1; /* 动画结束时透明度为1 */
}
}
.eraser {
position: absolute; /* 设置绝对定位 */
top: 0; /* 顶部对齐 */
left: -100%; /* 初始位置在容器左侧外 */
width: 100%; /* 宽度与容器相同 */
height: 100%; /* 高度与容器相同 */
background: white; /* 背景颜色为白色 */
z-index: 2; /* 设置元素的堆叠顺序，确保在文本上方 */
animation: erase 10s linear forwards; /* 应用擦除动画，持续10秒，线性速度，动画结束后保持最后一帧状态 */
animation-delay: 3s; /* 动画延迟3秒，确保所有行都有时间显现 */
}
@keyframes erase {
to {
transform: translateX(200%); /* 动画结束时，元素移动到容器右侧外 */
}
}
</style>
</head>
<body>
<div class="container">
<p>这是第一行文本，将会逐行显现。</p>
<p>这是第二行文本，紧随第一行之后显现。</p>
<p>这是第三行文本，它也会显现并被擦除。</p>
<div class="eraser"></div> <!-- 擦除元素，用于覆盖并擦除文本 -->
</div>
</body>
</html>
九：文本刮刮乐显现动画
1.效果展示
2.HTML完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本刮刮乐显现动画</title>
</head>
<style>
#canvas {
position: absolute;
left: 50%; /* 相对于body的左边缘定位 */
top: 50%; /* 相对于body的上边缘定位 */
transform: translate(-50%, -50%); /* 使用transform来居中 */
cursor: pointer;
}
.tu {
position: absolute;
left: 50%; /* 相对于body的左边缘定位 */
top: 50%; /* 相对于body的上边缘定位 */
transform: translate(-50%, -50%); /* 使用transform来居中 */
}
</style>
<body>
<p class="tu">你好，我是温轻舟</p>
<canvas id="canvas" width="700" height="300"></canvas>
</body>
</html>
<script>
function draw() {
var canvas = document.getElementById('canvas');
if (!canvas.getContext) return;
var ctx = canvas.getContext('2d');
//设置一个颜色 覆盖在文字上
ctx.beginPath();
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//属性方法
ctx.globalCompositeOperation = 'destination-out';
//设置画笔为圆形
ctx.lineCap = 'round';
//设置画笔宽度
ctx.lineWidth = 40;
// 当鼠标按下的时候
canvas.onmousedown = function(e) {
console.log("按下");
var rect = canvas.getBoundingClientRect(); // 获取 canvas 的边界
var x = e.clientX - rect.left; // 减去 canvas 的左边界
var y = e.clientY - rect.top; // 减去 canvas 的上边界
ctx.beginPath();
ctx.moveTo(x, y); // 使用调整后的坐标
moves();
};
// 当鼠标移动时候
function moves() {
canvas.onmousemove = function(e) {
console.log("移动");
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
ctx.lineTo(x, y); // 使用调整后的坐标
ctx.stroke();
};
}
// 当鼠标抬起时 去除移动事件
canvas.onmouseup = function(e) {
console.log("抬起");
canvas.onmousemove = null; // 设置为 null 而不是空字符串
};
}
draw();
</script>
END~温轻舟
