后端开发教程 - Java、Spring Boot 实战 - msg200.com
四种微妙的文本效果，为您的网站增添趣味
大家周一快乐！让我们学习四种精妙的 CSS 文本效果，为你的网站增添活力。✨✨
现场演示
事不宜迟，让我们开始吧
1. 悬停时振动的文字⚡
这是一种微妙的效果，当鼠标悬停在各个字符上时，我们可以使各个字符振动。
代码
.vibration span{
transition: all 500ms;
color: rgba(255, 255, 255, 0.8);
display: inline-block;
margin-right: 10px;
text-shadow: 1px 2px 3px #999;
}
.vibration span:hover{
filter: blur(3px);
animation: vibrate 50ms linear infinite forwards;
}
@keyframes vibrate{
0% {
transform: translateX(-1px) translateY(1px);
}
100% {
transform: translateX(1px) translateY(-2px);
}
}
我们使用 transform 属性来实现此效果，使角色在 y 轴和 x 轴上移动，并在悬停时循环播放动画。
我们还为角色添加了少量模糊以强调运动效果。
这里需要注意的一点是，我们必须确保 span 元素的 display 属性为
inline-block。因为变换只对具有块显示的元素有效。
更多详情请点击此处
Codepen
2. 文本内的波浪线
在这个效果中，我们使用 Chrome 的一个实验性功能为文本添加了描边效果。然后使用剪切路径属性创建波浪效果。
代码
<section class="waves-demo">
<div class="waves" data-word="WAVES">
WAVES
</div>
</section>
.waves {
color: transparent;
-webkit-text-stroke: 2px #fff;
position: relative;
}
.waves:after{
content: attr(data-word);
position: absolute;
top: 0;
left: 0;
color: #fff;
animation: waves 2s ease-in-out infinite forwards;
}
@keyframes waves{
0%, 100% {
clip-path: polygon(0 66%, 11% 59%, 18% 51%, 26% 46%, 35% 41%, 48% 44%, 55% 54%, 63% 63%, 76% 60%, 82% 50%, 92% 48%, 100% 53%, 100% 100%, 0% 100%);
}
50% {
clip-path: polygon(0 66%, 8% 74%, 17% 77%, 28% 70%, 35% 57%, 48% 44%, 56% 39%, 69% 41%, 75% 47%, 84% 60%, 92% 61%, 100% 53%, 100% 100%, 0% 100%);
}
}
在这里，我们使用一个-WebKit名为 text-stroke 的属性为文本添加描边效果。
然后我们使用pseudoafter 元素来填充白色。
然后我们对伪元素的剪切路径属性进行动画处理以形成波浪效果。
要轻松创建剪切路径效果，请使用Clippy工具创建自定义剪切路径。请参阅下文，
gif了解我是如何创建波浪效果的。
Codepen
3. 发光文字🌟
代码
.glow span {
color: #fff;
transition: all 300ms;
}
.glow span:hover {
text-shadow: 0 0 10px #0698a5,
0 0 30px #0698a5,
0 0 80px #0698a5,
0 0 120px #0698a5,
0 0 200px #0698a5;
}
为了实现这种效果，我们使用堆叠文本阴影来创建发光效果。
我们可以使用多个文本阴影值来堆叠在一起以创建其他令人惊叹的效果。
在这里，我们逐渐增加阴影的模糊半径，并赋予它亮蓝色。这解释了霓虹蓝色的光芒。
Codepen
4. 文字显示效果
代码
.reveal {
color: #fff;
-webkit-transition: all 400ms;
transition: all 400ms;
}
.reveal span {
display: inline-block;
-webkit-transition: all 400ms;
transition: all 400ms;
}
.reveal span:after {
content: 'can stop it';
position: absolute;
font-size: 20px;
font-weight: 700;
bottom: -10px;
left: 50%;
width: 200px;
text-align: center;
opacity: 0;
transform: translateX(-50%) scale(0);
transition: all 400ms;
}
.reveal:hover {
color: rgba(255, 255, 255, 0.1);
}
.reveal:hover span {
transform: scale(2);
color: #fff;
margin: 0 45px;
}
.reveal:hover span:after {
opacity: 1;
transform: translateX(-50%) scale(1);
}
为了达到此效果，我们再次使用伪:after选择器来添加附加文本。
然后我们使用 transform 属性来缩放悬停时的字符并添加一点边距，以强化推开效果。
Codepen
希望大家在这里学到一些东西。如果对任何技巧有任何疑问，请告诉我。
我每天都靠咖啡来补充能量，而且只靠咖啡。所以我知道，你知道我们都应该怎么做🤞
干杯🍻
<Akhil/>