首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS + HTML <文字效果>

CSS + HTML <文字效果>

作者头像
网罗开发
发布2021-04-26 11:22:53
1.4K0
发布2021-04-26 11:22:53
举报
文章被收录于专栏:网罗开发网罗开发

1. 前言


下面归类一些简单的文字效果,此处都为静态样式,想要动态的,可以根据自身需求添加 hover 效果。

<h1>Hello World</h1>

2. 效果 1


知识点: -webkit-box-reflect

h1 {
      -webkit-box-reflect: below -0.25em linear-gradient(transparent 0%, rgba(255, 255, 255, .6) 100%);
   }

3. 效果 2


h1 {
    /* 文字描边 width color */
    -webkit-text-stroke: 0.05rem black;
    color: transparent;
    text-shadow: -5px 0 rgba(0, 255, 255, 0.4), 5px 0 rgba(255, 0, 255, 0.4);
}

4. 效果 3


知识点:text-decoration 属性

h1 {
    text-decoration: line-through;
}

5. 效果 4


h1 {
    color: #f4f4f4;
    text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757;
}

6. 效果 5


h1 {
    color: transparent;
    background-image: linear-gradient( transparent 0%,transparent 50%,#447df7 50%, #447df7 100%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 0.05rem #447df7;
}

7. 效果 6


        h1 {
            color: transparent;
            text-shadow: 0 0 5px black;
        }

7. 效果 6


h1 {
    /* 文字间距 */
    letter-spacing: .3rem;
    text-shadow: 1px 1px 0px white,3px 3px 0px black;
}
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2021-04-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 网罗开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档