首頁 > 文章 > web前端 > 整理分享5種純CSS實現酷炫的文字效果

整理分享5種純CSS實現酷炫的文字效果

WBOY轉載: 2022-01-13 18:19:524372瀏覽

這篇文章為大家帶來了5中非常酷炫的文字效果，這些效果全是利用css來實現的，希望對大家有幫助。

整理分享5種純CSS實現酷炫的文字效果

CSS是一門很特殊的語言，你認為CSS只能用來控制網頁的結構與樣式，但只要你有豐富的想像力，就能創造無限可能。

一.漸層文字效果

#此效果主要利用background-clip:text配合color實現漸變文字效果首先了解background-clip: text;的意思：以盒子內的文字作為裁剪區域向外裁剪，文字之外的區域都將被裁剪掉。為文字容器設定漸進式背景

 background: linear-gradient(90deg, black 0%, white 50%, black 100%);

設定webkit-background-clip屬性，以文字作為裁切區域向外裁切

-webkit-background-clip: text;
        background-clip: text;

透過-webkit-animation屬性設定動畫,即可實現上述效果

-webkit-animation: shining 3s linear infinite;
        animation: shining 3s linear infinite;

@-webkit-keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}
@keyframes shining {
  from {
    background-position: -500%;
  }
  to {
    background-position: 500%;
  }
}

樣式引用

<html>
    <link rel="stylesheet" href="./css/neno-text-style.css">
    <body>
        <p class="neon">前端实验室</p>
    </body>
</html>

#二.彩虹文字效果（跑馬燈）

.text {
    letter-spacing: 0.2rem;
    font-size: 1.5rem;
    background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
}

此效果也是利用background-clip:text和線性漸變屬性linear-gradient實現，透過設定區域顏色值實現了彩虹文字的效果。

動態彩虹文字需要設定-webkit-animation屬性

-webkit-animation: maskedAnimation 4s infinite linear;
@keyframes maskedAnimation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

CSS樣式
.rainbow { letter-spacing: 0.2rem; font-size: 1.2rem; text-transform: uppercase; } .rainbow span { animation: rainbow 50s alternate infinite forwards; } @keyframes rainbow { 0% { color: #efc68f; } ... 100% { color: #8fefed; } }
<html> <head> <link rel="stylesheet" href="./css/rainbow-color-text-style.css"> </head> <body> <div class="text">【前端实验室】分享前端最新、最实用前端技术</div> </body> </html>

三.發光文字效果

整理分享5種純CSS實現酷炫的文字效果

# 此效果主要利用text-shadow屬性實作。 text-shadow屬性為文字添加一個或多個陰影。此屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。

.neon {
    color: #cce7f8;
    font-size: 2.5rem;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
}

@-webkit-keyframes shining {
    from {
        text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }
    to {
        text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
}

<html>
    <head>
        <link rel="stylesheet" href="./css/neno-text-style.css">
    </head>
    <body>
        <p class="neon">【前端实验室】分享前端最新、最实用前端技术</p>
    </body>
</html>

四.打字機效果

# 此效果主要是透過改變容器的寬度來實現的。

.typing {
    color: white;
    font-size: 2em;
    width: 21em;
    height: 1.5em;
    border-right: 1px solid transparent;
    animation: typing 2s steps(42, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

/* 打印效果 */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 21em;
    }
}
/* 光标 */
@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

<html>
   <head>
   <link rel="stylesheet" href="./css/typing-style.css">
   </head>
   <body>
   <div class="typing">【前端实验室】分享前端最新、最实用前端技术</div>
</html>

white-space:nowrap屬性主要是為了保證一行顯示，這裡考慮到英文字母的顯示，去除了該屬性，保證不會出現字元間斷的情況。

word-break:break-all使英文字元可以一個一個的呈現出來。
animation屬性中的steps功能符可以讓動畫斷斷續續的執行，而非連續執行。

steps()語法表示:steps(number, position)，其中number關鍵字表示將動畫分成多少段；position關鍵字表示動畫是從時間段的開頭連續還是末尾連續，支援start和end兩個關鍵字，意思分別如下：

start:表示直接開始

end:表示戛然而止，為預設值

整理分享5種純CSS實現酷炫的文字效果

遊標效果是透過box-shadow模擬實現的。透過上述的這幾個屬性就可以實現一個簡易的打字機效果了~

######### ###### 該動畫效果比較複雜，主要用到了CSS偽元素、元素自訂屬性、蒙版屬性、animation動畫等等。 ###

<div class="text" data-text="欢迎关注微信公众号【前端实验室】">
  欢迎关注微信公众号【前端实验室】
</div>

###這裡主要使用了自訂屬性，data-加上自訂的屬性名，賦值要顯示的文字供偽元素取得到對應的文字。 ###

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
      0% {
        clip-path: inset(0 0 0 0);
    }
    ...
    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

###這裡設定了兩個keyframes，分別為 animation-before 、animation-after，前者是準備給偽元素 before 使用的，後者是給偽元素 after 使用的。 ######其中clip-path屬性是CSS3的新屬性蒙版，其中的inset()值表示的是蒙版形狀為矩形,定義蒙版的作用區域後透過@keyframes來設定逐幀動畫，使蒙版的作用區域在垂直方向一直變化，達到上下抖動的效果。 ###

.text{
    display: inline-block;
    font-size: 3.5em;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}

.text::before{
    content: attr(data-text);
    position: absolute;
    left: -2px;
    width: 100%;
    background: black;
    text-shadow:2px 0 red;
    animation: animation-before 3s infinite linear alternate-reverse;
}

.text::after{
    content: attr(data-text);
    position: absolute;
    left: 2px;
    width: 100%;
    background: black;
    text-shadow: -2px 0 blue;
    animation: animation-after 3s infinite linear alternate-reverse;
}

###最後我們設定兩個偽元素before和after，分別定位到跟父元素同樣的位置，然後分別向左、右側移一點點的距離，製作一個錯位的效果，然後都將背景色設定為與父元素背景色一樣的顏色，用於遮擋父元素######這樣就可以實現了一個完美的故障風格的文字展示動畫了~######酷炫的特效可以為我們的網頁增添不一樣的風采，本文中實現的效果源代碼大師兄已經上傳到Github，公眾號後台回复aaa文字特效即可獲取，快來跟我們一起學習吧！ ######（學習影片分享：###css影片教學###）###

以上是整理分享5種純CSS實現酷炫的文字效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：juejin.im。如有侵權，請聯絡admin@php.cn刪除

上一篇：jsonp和ajax的差別是什麼下一篇：jsonp和ajax的差別是什麼

看更多