CSS + HTML <文字效果>

1. 前言

---

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

代码语言：javascript复制

<h1>Hello World</h1>

2. 效果 1

---

知识点： -webkit-box-reflect

代码语言：javascript复制

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

3. 效果 2

---

代码语言：javascript复制

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 属性

代码语言：javascript复制

h1 {
    text-decoration: line-through;
}

5. 效果 4

---

代码语言：javascript复制

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

---

代码语言：javascript复制

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

---

代码语言：javascript复制

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

7. 效果 6

---

代码语言：javascript复制

h1 {
    /* 文字间距 */
    letter-spacing: .3rem;
    text-shadow: 1px 1px 0px white,3px 3px 0px black;
}

hover text webkit

0 人点赞