本篇內容主要講解“web前端字體特效的實現方法是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“web前端字體特效的實現方法是什么”吧!
劃線動態：
背景高亮：
色塊進出：
首先，利用::after和::before就可以畫出上下兩條線，所以只需要一個 dom 元素即可。
其次，對于鼠標移入的動畫，要給上面兩個偽元素設置:hover選擇器。
最后是處理動畫方向。我們以上面的線條為例，在鼠標移入的時候，是從右到左變化的。這里是通過設置transform-origin屬性來修改動畫方向。下面的線條同理，方向相反即可。
注意：代碼是通過scaleX來實現縮放，相比于設置width，會啟用 GPU，避免重繪。
html 代碼：
<body> <span>xin-tan.com</span> </body>
css 代碼：
span {
color: #595959;
position: relative;
z-index: 1;
}
span::before,
span::after {
content: "";
z-index: -1;
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #262626;
transform: scaleX(0);
transition: transform 0.2s ease-in-out;
}
span::before {
top: 0;
transform-origin: center right;
}
span::after {
bottom: 0;
transform-origin: center left;
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform-origin: center left;
transform: scaleX(1);
}
span:hover::after {
transform-origin: center right;
transform: scaleX(1);
}首先，利用::before偽元素就可以模擬出覆蓋需要的色塊。所以僅僅需要一個 dom 元素。這里偽元素的content元素必須給，否則不會顯示（有些坑）。
其次，色塊大小改變是通過scaleY來設置的，原因和第一個動畫原因一樣。
最后，偽元素的色塊會覆蓋 dom 上的元素。所以需要給 dom 元素設置z-index，并且讓其生效并大于偽元素的z-index。
html 代碼：
<body> <span>xin-tan.com</span> </body>
css 代碼：
span {
color: #d9d9d9;
position: relative;
z-index: 1;
}
/*
1\. content必須給
2\. 用transform覆蓋 配合 z-index
*/
span::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -0.25em;
right: -0.25em;
z-index: -1;
background: #262626;
transform: scaleY(0.2);
transform-origin: center bottom;
transition: all 0.1s linear;
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform: scaleY(1);
}這和上一個“背景高亮”動畫類似，不同的是色塊的位置和大小變化方向不同。其余基本一致。
html:
<body> <span>xin-tan.com</span> </body>
css:
span {
color: #d9d9d9;
position: relative;
z-index: 1;
}
span::before {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #262626;
transform-origin: center right;
transform: scaleX(0);
transition: transform 0.1s linear;
/* 這里不要指明為 all */
}
span:hover {
cursor: pointer;
}
span:hover::before {
transform-origin: center left;
transform: scaleX(1);
}到此，相信大家對“web前端字體特效的實現方法是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
