纯CSS实现的文字效果竟然可以这么酷炫!
将前端实验室设为星标精品文章第一时间阅读
大家好,我是前端实验室的大师兄!
前言
CSS
是一门很特殊的语言,你认为CSS
只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。
本文中大师兄为你精选了10个使用纯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; background-clip: text;
通过 -webkit-animation
属性设置动画,即可实现上述效果
-webkit-animation: shining 3s linear infinite;
animation: shining 3s linear infinite;
二.彩虹文字效果(跑马灯)
.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;
}
}
三.发光文字效果
该效果主要利用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;
}
}
四.打字机效果
该效果主要是通过改变容器的宽度实现的。
.typing { color: white; font-size: 2em; width: 21em; height: 1.5em; border-right: 1px solid transparent; animation: typing 2s steps(42, end), blink-caret .75s step-end infinite; font-family: Consolas, Monaco; word-break: break-all; overflow: hidden;}
/* 打印效果 */
@keyframes typing {
from {
width: 0;
}
to {
width: 21em;
}
}
/* 光标 */
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: currentColor;
}
}
white-space:nowrap
属性主要是为了保证一行显示,这里考虑到英文字母的显示,去除了该属性,保证不会出现字符间断的情况。
word-break:break-all
使英文字符可以一个一个的呈现出来。
animation
属性中的steps
功能符可以让动画断断续续的执行,而非连续执行。
steps()
语法表示:steps(number, position)
,其中number
关键字表示将动画分为多少段 ;position
关键字表示动画是从时间段的开头连续还是末尾连续,支持start
和end
俩个关键字,含义分别如下:
start
:表示直接开始end
:表示戛然而止,为默认值
光标效果是通过box-shadow
模拟实现的。通过上述的这几个属性就可以实现一个简易的打字机效果了~
五.故障风格文字效果
该动画效果比较复杂,主要用到了CSS伪元素
、元素自定义属性
、蒙版属性
、animation动画
等等。