凸版印刷
实现原理
此种效果通过设置“背景中等亮度，文字深色”实现。深色底、浅色字也行，只要文字不是黑色并且背景不是纯黑或纯白。
background:hsl(210,13%,60%);
color:hsl(210,13%,30%);
text-shadow:0 .03em .03em hsla(0,0%,100%,.8);
空心文字
实现原理
设置文字颜色与背景色相同实现空心，在四个方向上设置阴影实现轮廓的粗细以及颜色。
color:white;
text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;
发光文字
实现原理
通过color设置文字的颜色实现光的颜色，通过设置阴影shadow的模糊越来越大实现发光(光线逐渐减弱)。
background:#203;
color:#ffc;
text-shadow:0 0 .1em,0 0 .3em;
模糊文字
实现原理
通过color设置文字的颜色，通过设置阴影shadow的模糊越来越大实现模糊(此处阴影的颜色与color的颜色相同)。
div{
width:200px;
background:#203;
color:transparent;
text-shadow:0 0 .1em white,0 0 .3em white;
transition:.5s;
}
div:hover{
color:white;
}
描边文字
实现原理
通过color设置文字的颜色实现填充色(与背景色不能相同，否则空心），在四个方向上设置阴影实现轮廓(描边)的粗细以及颜色。
background:#203;
color:white;
text-shadow:1px 1px orange,-1px -1px orange,1px -1px black,-1px 1px orange;
凸起文字
实现原理
文字凸起(伪3D)效果的主要思路就是使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果
background:#58a;
color:white;
text-shadow:0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;
闪烁文字
实现原理
通过设置动画的某一时刻的透明度为透明，某一时刻的透明度不透明实现显隐状态。通过动画持续时间实现频率，通过动画次数设置为无限实现显隐切换。设置时间变化为线性变化实现平缓闪烁。
@keyframes blink-smooth{50%{color:transparent;}}
div{
animation:.5s blink-smooth infinite alternate linear;
}
打印效果
实现原理
让容器的宽度成为动画的主体，把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式、一个字一个字地扩张到它应有的宽度
@keyframes typing{0%{width:0;}}
@keyframes caret{50%{border-color:transparent;}}
div{
width:9em;
animation:typing 4s steps(9) infinite ,caret .5s steps(1) infinite;
white-space: nowrap;
overflow: hidden;
border-right:1px solid;
}
路径文字
融合文字
实现原理
通过对比度滤镜把高斯模糊的模糊边缘给隐藏，利用高斯模糊实现融合效果
.box{filter: contrast(1);background: #fff;overflow: hidden;padding:10px;font:bold 20px/20px '宋体';}
.text{filter:blur(0px);transition:1s;}
.box:hover{filter: contrast(20);}
.box:hover .text{filter:blur(3px);letter-spacing: -1em}
</style>
<div class="box">
<span class="text">小火柴的蓝色理想</span>
</div>
显隐文字
<style>
.box{filter: contrast(1);background: #fff;overflow: hidden;padding:10px;font:bold 20px/20px '宋体';}
.text{filter:blur(0px);transition:1s;}
.box:hover{filter: contrast(20);}
.box:hover .text{filter:blur(3px);letter-spacing: -1em}
</style>
<div class="box">
<span class="text">小火柴的蓝色理想</span>
</div>
纹理文字
方式1：背景裁切
文字颜色的实现：使用线性渐变来填充背景色，使用-webkit-text-fill-color: transparent设置文字填充颜色为透明。从而使看到的文字颜色为背景色。
文字轮廓的实现：通过背景裁切-webkit-background-clip: text;实现文字轮廓 。
<style>
.box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 70%), hsl(320, 100%, 50%)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: cover;font:bolder 100px/100px Impact;position:absolute;}
</style>
<div class="box-with-text">match</div>
方式2：混合模式
文字颜色的实现：使用线性渐变来填充背景色，使用-webkit-text-fill-color: transparent设置文字填充颜色为透明。从而使看到的文字颜色为背景色。
文字轮廓的实现：通过混合模式-webkit-background-clip: text;将两个元素进行混合，实现文字轮廓 。
.box-with-text { background-image: linear-gradient(135deg,hsl(50, 100%, 70%), hsl(320, 100%, 50%)); background-size: cover;font:bolder 100px/100px Impact;position:absolute;}
.text{mix-blend-mode: lighten; background:white;}
</style>
<div class="box-with-text"><span class="text">match</span></div>
网友评论