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;
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,251评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,229评论 4 61
  • 继“互联网+”成为潮流后,“VR+”这一热词横空出世,在VR界及科技领域全面发酵,描绘着VR技术的发展与突破,各行...
    小离2014阅读 563评论 0 49
  • 曾经的好朋友会渐行渐远,是因为我们活成了彼此不能理解的样子。 其实,别人活成什么样子我们没法感同身受,毕竟我们没有...
    曹阳CY阅读 373评论 0 1