开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
本文整理了四个酷炫的文字特效，方便大家收藏和学习。话不多说直接开整。
文字打印机效果
(不)是要暗示你们什么哟！
要点
- 修改容器的宽度，隐藏多余的文字
- 闪烁的右侧光标是通过修改border的颜色来实现
@keyframes typing {
from {
width: 0;
}
to {
width: 15em;
}
}
@keyframes border {
from,
to {
border-color: transparent;
}
50% {
border-color: white;
}
}
.text {
color: white;
width: 15em;
height: 1.5em;
font-size: 2em;
border-right: 1px solid transparent;
overflow: hidden;
word-break: break-all;
animation: typing 2s steps(30, end), border 0.75s step-end infinite;
border-right: 1px solid transparent;
margin: 0 auto;
}
- 其中animation属性中的steps(number,[end | start])使动画断断续续展示，也就是逐帧动画。参数1表示把动画分割为多少帧，上面按字数乘以2分成30帧；参数2使用start/end关键字，表示舍弃第一帧/最后一帧，默认为end。具体讲解可参考此篇css中animation的steps分步动画。
- step-end 会使 keyframes 动画到了定义的关键帧处直接突变，并没有变化的过程。也就是颜色在50%的时候直接变成白色，无需过渡变化。
探照灯效果
要点
- 使用radial-gradient径向渐变属性。radial-gradient(shape size at position, start-color, ..., last-color)，shape形状有circle/ellipses，size表示半径尺寸，position表示渐变位置，默认为中心位置。
- 监听鼠标在文字上方的移动，修改background-position属性，使光环随着鼠标移动。background-position默认位置在元素中心点。
- transition使移动动画平缓过渡展示。
.text {
font-size: 100px;
text-align: center;
font-weight: 700;
color: transparent; // 文字颜色会盖住背景颜色，所以设置成透明色
background: radial-gradient(
circle,
transparent,
transparent 20%,
rgba(93, 197, 198, 0.7) 20%,
rgba(93, 197, 198, 0.7) 35%,
rgba(63, 140, 207, 0.7) 35%,
rgba(63, 140, 207, 0.7) 50%,
transparent 50%
);
background-color: #2fddc6;
-webkit-background-clip: text; // 背景被文字裁剪
display: inline-block;
position: relative;
background-position: -400px 0; // 一开始不展示光环
background-repeat: no-repeat;
transition: all 1s; // 过渡动画
}
document
.getElementsByClassName("text")[0]
.addEventListener("mousemove", function (e) {
const { clientX, clientY } = e;
const { clientWidth, clientHeight } = e.currentTarget;
e.currentTarget.style.backgroundPosition =
clientX -
clientWidth / 2 +
"px " +
(clientY - clientHeight / 2) +
"px";
});
注意
上面采用的是不过渡的渐变，要分辨不过渡渐变和过渡渐变的写法不同：
radial-gradient(red, red30%, yellow 50%, green);
0~30%都是红色，因此颜色不过渡，30%～50%红色到黄色渐变，50%～100%是黄色到绿色渐变。
文字大波浪
要点
- svg波浪动画效果，使用animate标签。dur：动画时长；repeatCount：重复次数；attributeName：改变元素属性名，这里改变的是路径d;values动画的运动节点，多个封号隔开；
- 文字裁剪，使用clipPath标签，标签id对应css属性中的clip-path: url(#id-name);
<svg
width="200px"
height="200px"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<text
text-anchor="middle"
font-size="42px"
transform="translate(100,120)"
style="font-weight: 600; fill: #000"
>
稀土掘金
</text>
<defs>
<clipPath id="text-clip"> // 裁剪主体
<text
text-anchor="middle"
font-size="42px"
transform="translate(100,120)"
style="font-weight: 600"
>
稀土掘金
</text>
</clipPath>
</defs>
<g style="clip-path: url(#text-clip)">
<path
fill="rgba(154, 205, 50, .8)"
d="M 0 100 C 133.633 85.12 51.54 116.327 200 100 A 95 95 0 0 1 0 100 Z"
>
<animate
dur="5s"
repeatCount="indefinite"
attributeName="d"
attributeType="XML"
values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z"
></animate>
</path>
</g>
</svg>
裁剪之前：
裁剪之后：
svg文字路径运动
第一步，随便绘制一条svg曲线，在线svg绘制工具
第二步，使用animate标签，让文字随着路径运动
- attributeName变化的属性是startOffset，改变文字的初始位置
- from/to表示运动距离，要计算曲线的总长度。
获取path元素的曲线长度：
document.getElementById(id-path).getTotalLength()
<svg width="500" height="500">
<path
stroke="#000"
fill="none"
id="text-path"
d="M 100 0 Q 50 0 50 50 Q 75 100 125 100 Q 150 100 175 75 Q 125 50 75 100 Q 50 150 200 150 Q 125 100 75 200 Q 50 250 225 225"
></path>
<text class="text-path" dy="10">
<textPath xlink:href="#text-path">
稀土掘金
<animate
attributeName="startOffset"
from="0"
to="835"
dur="5s"
repeatCount="indefinite"
></animate>
</textPath>
</text>
</svg>
谢谢观看！
ending...
