css 字体特效代码,css实用字体特效

列举三种比较普遍的字体效果

1.鼠标上移闪光字体

a1.png

代码：

main {

width: 300px;

height: 100px;

padding: 20px;

font:500%/1 Rockwell,serif;

background: #203;

color: #ffc;

transition: 1s;

}

main:hover {

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

}

2.3d文字

a2.png

代码：

main{

background: #203;

padding: 20px;

color: white;

width: 300px;

height: 100px;

font:500%/1 Rockwell,serif;

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;

}

3.文字投影

a3.png

代码：

main {

background: hsl(0,50%,45%);

padding:20px;

font:500%/1 Rockwell,serif;

font-weight: bold;

display: block;

width: 300px;

height: 100px;

color: white;

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

3px 3px black,4px 4px black,

5px 5px black,6px 6px black,

7px 7px black,8px 8px black;

}