CSS文本效果

2023-08-17 09:08:16

前面的话

　　本文将详细介绍CSS文本效果

凸版印刷效果

　　这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行

【浅色背景深色文本】

  background:hsl(210,13%,60%);

  color:hsl(210,13%,30%);

  text-shadow:0 .03em .03em hsla(0,0%,100%,.8);

【深色背景浅色文本】

  background:hsl(210,13%,40%);

  color:hsl(210,13%,75%);

  text-shadow:0 -1px 1px black;

空心字效果

  color:white;

  text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;

发光效果

  background:#203;

  color:#ffc;

  text-shadow:0 0 .1em,0 0 .3em;

模糊效果

div{

  width:200px;

  background:#203;

  color:transparent;

  text-shadow:0 0 .1em white,0 0 .3em white;

  transition:.5s;

}

div:hover{

  color:white;

}

　　鼠标移入后，文字由模糊变清晰

凸起效果

　　文字凸起(伪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;

}

环形文字

【SVG】

　　使用SVG来实现环形文字较为简单

<style>

div{width: 100px;height: 100px;border:1px solid black;}

svg{margin-left: -20px;}

</style>

<div>

  <svg height="100" version="1.1" xmlns="http://www.w3.org/2000/svg" >

    <path id="my_path"  d="M 50 50 a 20 20, 0, 1, 1, 0 1 Z" fill="none"/>

    <text>

      <textPath xlink:href="#my_path">小火柴的蓝色理想</textPath>

    </text>

  </svg>

</div>

文字融合

　　模糊滤镜叠加对比度滤镜可以产生融合效果

　　[注意]文字融合的思路来自chokcoco的博文CSS滤镜技巧与细节

　　1、模糊滤镜filter: blur()：给图像设置高斯模糊效果

　　2、对比度滤镜filter: contrast()：调整图像的对比度

　　当它们同时使用时，产生了奇妙的融合现象，通过对比度滤镜把高斯模糊的模糊边缘给隐藏，利用高斯模糊实现融合效果

<style>

.box{filter: contrast(20);background: #fff;overflow: hidden;}

.left,.right{float: left;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);}

.left{background-color: black;}

.right{background-color: red;margin-left:-20px;}

</style>

<div class="box">

    <div class="left"></div>

    <div class="right"></div>

</div>

　　为其中一个元素添加动画后，效果更明显

<style>

.box{filter: contrast(20);background: #fff;overflow: hidden;padding:10px;}

.left,.right{display:inline-block;width: 100px;height: 100px;border-radius: 50%;filter: blur(6px);}

.left{background-color: black;position:absolute;left:0;animation: move 2s infinite alternate;}

@keyframes move{100%{left:250px;}}

.right{background-color: red;margin-left:120px;}

</style>

<div class="box">

    <div class="left"></div>

    <div class="right"></div>

</div>

【文字显隐效果】

　　首先，利用blur()和contrast()实现一个文字显隐效果

<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);}

</style>

<div class="box">

    <span class="text">小火柴的蓝色理想</span>

</div>

　　鼠标移入后，文字消失；移出后，文字恢复

【文字融合】

　　下面来配合字符间距letter-spacing来实现文字融合效果

<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>

　　鼠标移入后，文字融合；移出后，文字恢复

码农公寓