CSS文本陰影 text-shadow 懸停效果詳解

本文將專注于使用 CSS text-shadow 屬性來實現(xiàn)有趣的鼠標(biāo)懸停效果,但是實際上并不會為這些文本制作任何文本陰影效果。
text-shadow 沒有文字陰影
通過以下的gif圖中的鼠標(biāo)懸停效果,相信你能理解使用 text-shadow 卻為什么沒有陰影。
看到此圖你的第一感覺是不是復(fù)制了一份文本,比如創(chuàng)建偽元素,設(shè)置 content: 'text'
,然后為其設(shè)置單獨的動畫。但是本文完全使用text-shadow
實現(xiàn),接下來將為大家展開說明四種懸停動畫的實現(xiàn)方式。
text-shadow 語法
text-shadow為文字添加陰影,可以為文字添加多個陰影,添加多個時陰影值之間用逗號隔開。每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成。
text-shadow: h-shadow v-shadow blur color;
參數(shù) | 描述 |
---|---|
h-shadow | 必需。水平陰影的位置。允許負(fù)值。 |
v-shadow | 必需。垂直陰影的位置。允許負(fù)值。 |
blur | 可選。模糊的距離。 |
color | 可選。陰影的顏色。 |
懸停效果#1
CSS代碼如下,我們將文本實際的顏色設(shè)置透明(color: #0000);然后通過text-shadow
創(chuàng)建兩個陰影,可選參數(shù)blur不設(shè)置,這樣我們就得到了一份清晰的陰影,通過設(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ū)域是我們頁面可視區(qū)。通過設(shè)置overflow: hidden
,重復(fù)的文本也就看不見了,在懸停過程中增加transition
過渡時間,看起來就像是兩個文本在交替顯示,這就是本文示例中的主要技巧。
接下來可以繼續(xù)優(yōu)化我們的CSS代碼,如上面代碼所示,我們多次使用了1.2em來定義了陰影的高度及移動的偏移量,通過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; }
這樣還是不夠簡潔,還可以通過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
這個動畫主要用到了兩個屬性,text-shadow和background,text-shadow仍然是設(shè)置兩個圖層,但是這次只需要移動下面的一個,在移動的過程中將上面的顏色設(shè)置為透明。同時增加一個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; }
以上我們通過結(jié)合CSStext-shadow和background屬性創(chuàng)建了懸停效果,但是我們還能繼續(xù)使用CSS變量來優(yōu)化代碼,最終只需要一個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
這個效果是基于本文第一個動畫效果增加了一個前置動畫效果。經(jīng)過最終優(yōu)化后也只需控制一個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
這個懸停效果是基于第二種效果的改進(jìn)版本,這里新用到了clip-path
,我們使用inset(0 0 0 0)
類似于overflow: hidden
我們所看到的只是實際文本。在懸停時,我們使用等于高度的負(fù)值更新第三個值(表示底部偏移)以顯示放置在底部的文本層。因為我們需要先運行clip-path
動畫,然后再運行其他所有內(nèi)容,所以我們在懸停時為所有屬性添加延遲,除了clip-path
:
transition: 0.4s 0.4s, clip-path 0.4s;
在鼠標(biāo)移出時,我們做相反的事情:
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; }
最后
如上的幾個例子都只用到了一個元素和CSS實現(xiàn)了幾種復(fù)雜的懸停效果,不需要用到其他的元素及偽元素?;谝陨系膭赢嬁梢园l(fā)現(xiàn)我們可以結(jié)合不同的動畫組成更復(fù)雜的動畫效果,且相對不需要很大的成本。
到此這篇關(guān)于CSS文本陰影 text-shadow 懸停效果詳解的文章就介紹到這了,更多相關(guān)css 文本陰影 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 本文通過實例代碼給大家介紹了CSS中使用文本陰影與元素陰影效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2020-01-18
css漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解
下面小編就為大家?guī)硪黄猚ss漸變色彩 省略標(biāo)記 嵌入字體 文本陰影全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-05