這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 CSS是有魔法的，我們今天來實現一個CSS的動畫效果，只需要幾行代碼就可以搞定。 第一步、我們要將一行文字從中間展開 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
CSS是有魔法的，我們今天來實現一個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>
以上是基礎代碼結構，通過調整letter-spacing的值，我們可以控制他的展開與收起。值越小為負數時文字就可以擠在一起，越大文字間距就越大。
預設值為0時正常顯示的效果
小於正常值的效果
我們可以為節點加上keyframes動畫，此時letter-spacing屬性轉由keyframes控制可以達到自動展開文字的效果
.text{
font-size: 100px;
color: #fff;
animation: showup 3s forwards;
}
@keyframes showup {
from{
letter-spacing: -50px;
}
to{
letter-spacing: 10px;
}
}
第二步、我們需要設置文字融合在一起的效果
先給文本節點設置filter blur文字變得模糊
學過ps的就會知道，當給圖片加上較高的對比度的時候，就會導致黑的部分越黑，白的部分越白。我們給父節點加上filter，設置contrast(30)，可以獲得如下效果
這樣就有了一些圓潤的邊緣，最後我們將對應的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>
本文轉載於:
https://juejin.cn/post/7220696133730828344
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
