css實(shí)現(xiàn)交融文字效果的項(xiàng)目實(shí)踐

發(fā)布時(shí)間：2023-04-27 16:53:27 作者：一介散修

這篇文章將介紹如何使用CSS實(shí)現(xiàn)交融文字效果，這是一種獨(dú)特的標(biāo)題設(shè)計(jì)，可以增加頁(yè)面的視覺(jué)吸引力和用戶體驗(yàn)。通過(guò)使用CSS的letter-spacing屬性，我們可以創(chuàng)建出字母之間交錯(cuò)重疊的效果，實(shí)現(xiàn)更加多樣化的效果

CSS是有魔法的，我們今天來(lái)實(shí)現(xiàn)一個(gè)CSS的動(dòng)畫(huà)效果，只需要幾行代碼就可以搞定。

第一步、我們要將一行文字從中間展開(kāi)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #000;
        }
        .container{
            margin-top: 50px;
            text-align: center;
            background-color: #000;
            filter: contrast(30);
        }
        .text{
            font-size: 100px;
            color: #fff;
            /* 第一步、如何從中間展開(kāi) */
            letter-spacing: 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="text">hello world</span>
    </div>
</body>
</html>

以上是基礎(chǔ)代碼結(jié)構(gòu)，通過(guò)調(diào)整letter-spacing的值，我們可以控制他的展開(kāi)與收起。值越小為負(fù)數(shù)時(shí)文字就可以擠在一起，越大文字間距就越大。

默認(rèn)值為0時(shí)正常顯示的效果

小于正常值的效果

我們可以為節(jié)點(diǎn)加上keyframes動(dòng)畫(huà)，此時(shí)letter-spacing屬性轉(zhuǎn)由keyframes控制可以達(dá)到自動(dòng)展開(kāi)文字的效果

.text{
  font-size: 100px;
  color: #fff;
  animation: showup 3s forwards;
}
@keyframes showup {
  from{
    letter-spacing: -50px;
  }
  to{
    letter-spacing: 10px;
  }
}

第二步、我們需要設(shè)置文字融合在一起的效果

先給文本節(jié)點(diǎn)設(shè)置filter blur文字變得模糊

學(xué)過(guò)ps的就會(huì)知道，當(dāng)給圖片加上較高的對(duì)比度的時(shí)候，就會(huì)導(dǎo)致黑的部分越黑，白的部分越白。我們給父節(jié)點(diǎn)加上filter，設(shè)置contrast(30)，可以獲得如下效果

這樣就有了一些圓潤(rùn)的邊緣，最后我們將對(duì)應(yīng)的css屬性交給keyframes控制，就可以達(dá)到最終的效果

@keyframes showup {
    from{
        letter-spacing: -50px;
				/* 新增 */
        filter: blur(10px);
    }
    to{
        letter-spacing: 10px;
        /* 新增 */
        filter: blur(2px);
    }
}

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: #000;
        }
        .container{
            margin-top: 50px;
            text-align: center;
            background-color: #000;
            filter: contrast(30);
        }
        .text{
            font-size: 100px;
            color: #fff;
            /* 第一步、如何從中間展開(kāi) */
            /* letter-spacing: 0px; */
            animation: showup 3s forwards;
        }
        @keyframes showup {
            from{
                letter-spacing: -50px;
                filter: blur(10px);
            }
            to{
                letter-spacing: 10px;
                filter: blur(2px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="text">hello world</span>
    </div>
</body>
</html>

到此這篇關(guān)于css實(shí)現(xiàn)交融文字效果的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)css交融文字效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！