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