CSS是一门很特殊的语言，你认为CSS只能用来控制网页的结构与样式，但只要你有丰富的想象力，就能创造无限可能。
一.渐变文字效果
该效果主要利用background-clip:text配合color实现渐变文字效果首先了解background-clip: text；的意思：以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。
给文本容器设置渐变背景
background: linear-gradient(90deg, black 0%, white 50%, black 100%);
设置webkit-background-clip属性，以文字作为裁剪区域向外裁剪
-webkit-background-clip: text;css最新
background-clip: text;
通过-webkit-animation属性设置动画，即可实现上述效果
-webkit-animation: shining 3s linear infinite;
animation: shining 3s linear infinite;
@-webkit-keyframes shining {
from {
background-position: -500%;
}
to {
background-position: 500%;
}
}
@keyframes shining {
from {
background-position: -500%;
}
to {
background-position: 500%;
}
}
样式引用
<html>
<link rel="stylesheet" href="./css/neno-text-style.css">
<body>
<p class="neon">前端实验室</p>
</body>
</html>
二.彩虹文字效果（跑马灯）
.text {
letter-spacing: 0.2rem;
font-size: 1.5rem;
background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
}
该效果也是利用background-clip:text和线性渐变属性linear-gradient实现，通过设置区域颜值实现了彩虹文字的效果。
动态彩虹文字需要设置-webkit-animation属性
-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
0% {
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
CSS样式
.rainbow {
letter-spacing: 0.2rem;
font-size: 1.2rem;
text-transform: uppercase;
}
.rainbow span {
animation: rainbow 50s alternate infinite forwards;
}
@keyframes rainbow {
0% {
color: #efc68f;
}
...
100% {
color: #8fefed;
}
}
<html>
<head>
<link rel="stylesheet" href="./css/rainbow-color-text-style.css">
</head>
<body>
<div class="text">【前端实验室】分享前端最新、最实用前端技术</div>
</body>
</html>
三.发光文字效果
该效果主要利用text-shadow属性实现。text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜值进行规定。
.neon {
color: #cce7f8;
font-size: 2.5rem;
-webkit-animation: shining 0.5s alternate infinite;
animation: shining 0.5s alternate infinite;
}
@-webkit-keyframes shining {
from {
text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
}
to {
text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
}
}
<html>
<head>
<link rel="stylesheet" href="./css/neno-text-style.css">
</head>
<body>
<p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
</body>
</html>
四.打字机效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。