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

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

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

CSS是有魔法的，我們今天來實現(xiàn)一個CSS的動畫效果，只需要幾行代碼就可以搞定。

第一步、我們要將一行文字從中間展開

<!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;
            /* 第一步、如何從中間展開 */
            letter-spacing: 0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="text">hello world</span>
    </div>
</body>
</html>

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

默認值為0時正常顯示的效果

小于正常值的效果

我們可以為節(jié)點加上keyframes動畫，此時letter-spacing屬性轉(zhuǎn)由keyframes控制可以達到自動展開文字的效果

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

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

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

學過ps的就會知道，當給圖片加上較高的對比度的時候，就會導致黑的部分越黑，白的部分越白。我們給父節(jié)點加上filter，設(shè)置contrast(30)，可以獲得如下效果

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

@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;
            /* 第一步、如何從中間展開 */
            /* 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實現(xiàn)交融文字效果的項目實踐的文章就介紹到這了,更多相關(guān)css交融文字效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！