[1]凸版印刷效果 [2]空心字效果 [3]發光效果 [4]模糊效果 [5]凸起效果 [6]閃爍效果 [7]打字效果 [8]環形文字 ...
前面的話
本文將詳細介紹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>
