CSS文本陰影 text-shadow 懸停效果詳解
我要評(píng)論本文將專注于使用 CSS text-shadow 屬性來(lái)實(shí)現(xiàn)有趣的鼠標(biāo)懸停效果，但是實(shí)際上并不會(huì)為這些文本制作任何文本陰影效果。
text-shadow 沒(méi)有文字陰影
通過(guò)以下的gif圖中的鼠標(biāo)懸停效果，相信你能理解使用 text-shadow 卻為什么沒(méi)有陰影。
看到此圖你的第一感覺是不是復(fù)制了一份文本，比如創(chuàng)建偽元素，設(shè)置 content: 'text'，然后為其設(shè)置單獨(dú)的動(dòng)畫。但是本文完全使用text-shadow 實(shí)現(xiàn)，接下來(lái)將為大家展開說(shuō)明四種懸停動(dòng)畫的實(shí)現(xiàn)方式。
text-shadow 語(yǔ)法
text-shadow為文字添加陰影，可以為文字添加多個(gè)陰影，添加多個(gè)時(shí)陰影值之間用逗號(hào)隔開。每個(gè)陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成。
text-shadow: h-shadow v-shadow blur color;
| 參數(shù) | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負(fù)值。 |
| v-shadow | 必需。垂直陰影的位置。允許負(fù)值。 |
| blur | 可選。模糊的距離。 |
| color | 可選。陰影的顏色。 |
懸停效果#1
CSS代碼如下，我們將文本實(shí)際的顏色設(shè)置透明（color: #0000）；然后通過(guò)text-shadow創(chuàng)建兩個(gè)陰影，可選參數(shù)blur不設(shè)置，這樣我們就得到了一份清晰的陰影，通過(guò)設(shè)置不同的顏色和垂直的數(shù)值即可產(chǎn)生炫酷的效果。
.hover-1 {
line-height: 1.2em;
color: #0000;
text-shadow:
0 0 #000,
0 1.2em #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
text-shadow:
0 -1.2em #000,
0 0 #1095c1;
}
如下圖所示，紅色虛線區(qū)域是我們頁(yè)面可視區(qū)。通過(guò)設(shè)置overflow: hidden，重復(fù)的文本也就看不見了，在懸停過(guò)程中增加transition過(guò)渡時(shí)間，看起來(lái)就像是兩個(gè)文本在交替顯示，這就是本文示例中的主要技巧。
接下來(lái)可以繼續(xù)優(yōu)化我們的CSS代碼，如上面代碼所示，我們多次使用了1.2em來(lái)定義了陰影的高度及移動(dòng)的偏移量，通過(guò)CSS var() 自定義屬性值優(yōu)化后的代碼如下：
.hover-1 {
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 0 #000,
0 var(--h) #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
text-shadow:
0 calc(-1 * var(--h)) #000,
0 0 #1095c1;
}
這樣還是不夠簡(jiǎn)潔，還可以通過(guò)calc()繼續(xù)優(yōu)化：
.hover-1 {
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 calc(-1*var(--_t, 0em)) #000,
0 calc(var(--h) - var(--_t, 0em)) #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
--_t: var(--h);
}
懸停效果#2
這個(gè)動(dòng)畫主要用到了兩個(gè)屬性，text-shadow和background，text-shadow仍然是設(shè)置兩個(gè)圖層，但是這次只需要移動(dòng)下面的一個(gè)，在移動(dòng)的過(guò)程中將上面的顏色設(shè)置為透明。同時(shí)增加一個(gè)background-size修改背景色。
.hover-2 {
/* the height */
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 var(--_t,var(--h)) #fff,
0 0 var(--_c, #000);
background:
linear-gradient(#1095c1 0 0)
bottom/100% var(--_d, 0) no-repeat;
overflow: hidden;
transition: 0.3s;
}
.hover-2:hover {
--_d: 100%;
--_t: 0;
--_c: #0000;
}
以上我們通過(guò)結(jié)合CSStext-shadow和background屬性創(chuàng)建了懸停效果，但是我們還能繼續(xù)使用CSS變量來(lái)優(yōu)化代碼，最終只需要一個(gè)CSS自定義屬性變量即可。
.hover-2 {
/* the height */
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 var(--_i, var(--h)) #fff,
0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
background:
linear-gradient(#1095c1 0 0)
bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
overflow: hidden;
transition: 0.3s;
}
.hover-2:hover {
--_i: 0;
}
懸停效果#3
這個(gè)效果是基于本文第一個(gè)動(dòng)畫效果增加了一個(gè)前置動(dòng)畫效果。經(jīng)過(guò)最終優(yōu)化后也只需控制一個(gè)CSS自定義變量即可。
.hover-3 {
/* the color */
--c: #1095c1;
/* the height */
--h: 1.2em;
line-height: var(--h);
color: #0000;
overflow: hidden;
text-shadow:
0 calc(-1 * var(--h) * var(--_i, 0)) var(--c),
0 calc(var(--h) * (1 - var(--_i, 0))) #fff;
background:
linear-gradient(var(--c) 0 0) no-repeat
calc(200% - var(--_i, 0) * 100%) 100% / 200% calc(100% * var(--_i, 0) + .08em);
transition: .3s calc(var(--_i, 0) * .3s), background-position .3s calc(.3s - calc(var(--_i, 0) * .3s));
}
.hover-3:hover {
--_i: 1;
}
懸停效果#4
這個(gè)懸停效果是基于第二種效果的改進(jìn)版本，這里新用到了clip-path，我們使用inset(0 0 0 0)類似于overflow: hidden我們所看到的只是實(shí)際文本。在懸停時(shí)，我們使用等于高度的負(fù)值更新第三個(gè)值（表示底部偏移）以顯示放置在底部的文本層。因?yàn)槲覀冃枰冗\(yùn)行clip-path動(dòng)畫，然后再運(yùn)行其他所有內(nèi)容，所以我們?cè)趹彝r(shí)為所有屬性添加延遲，除了clip-path：
transition: 0.4s 0.4s, clip-path 0.4s;
在鼠標(biāo)移出時(shí)，我們做相反的事情：
transition: 0.4s, clip-path 0.4s 0.4s;
最后的完整代碼
.hover-4 {
/* the color */
--c: #1095c1;
/* the height */
--h: 1.2em;
line-height: var(--h);
color: #0000;
text-shadow:
0 var(--_t, var(--h)) #fff,
0 0 var(--_c, #000);
box-shadow: 0 var(--_t, var(--h)) var(--c);
clip-path: inset(0 0 0 0);
background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
transition: 0.4s, clip-path 0.4s 0.4s;
}
.hover-4:hover {
--_t: 0;
--_c: #0000;
clip-path: inset(0 0 calc(-1 * var(--h)) 0);
transition: 0.4s 0.4s, clip-path 0.4s;
}
最后
如上的幾個(gè)例子都只用到了一個(gè)元素和CSS實(shí)現(xiàn)了幾種復(fù)雜的懸停效果，不需要用到其他的元素及偽元素?；谝陨系膭?dòng)畫可以發(fā)現(xiàn)我們可以結(jié)合不同的動(dòng)畫組成更復(fù)雜的動(dòng)畫效果，且相對(duì)不需要很大的成本。
到此這篇關(guān)于CSS文本陰影 text-shadow 懸停效果詳解的文章就介紹到這了,更多相關(guān)css 文本陰影 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本文通過(guò)實(shí)例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-18css漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解
下面小編就為大家?guī)?lái)一篇css漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-05
