特效一覽
劃線動態 ：
背景高亮 ：
色塊進出 ：
劃線動態
效果圖
原理
首先，利用
::after
和
::before
就可以畫出上下兩條線，所以只需要一個 dom 元素即可。
其次，對於滑鼠移入的動畫，要給上面兩個偽元素設定
:hover
選擇器。
最後是處理動畫方向。我們以上面的線條為例，在滑鼠移入的時候，是從右到左變化的。這裡是通過設定
transform-origin
屬性來修改動畫方向。下面的線條同理，方向相反即可。
注意
：程式碼是通過
scaleX
來實現縮放，相比於設定
width
，會啟用 GPU，避免重繪。
程式碼
html 程式碼：
<body>
<span>xin-tan.com</span>
</body>
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視訊教程，希望新手少走彎路
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);
}
web前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視訊教程，希望新手少走彎路
背景高亮
效果圖
原理
首先，利用
::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前端開發學習Q-q-u-n： 784783012 ，分享開發工具，零基礎，進階視訊教程，希望新手少走彎路