戲劇性的層次

巧妙地使用CSS和JS會(huì)復(fù)制圖像并將它們疊加在一起。從那里，CSS 過濾器分別添加到每個(gè)圖像。該技術(shù)產(chǎn)生了電影質(zhì)量效果，否則難以實(shí)現(xiàn)。

 

快速而強(qiáng)大

這一系列懸停效果的優(yōu)點(diǎn)在于它們提供即時(shí)滿足感。但是這種速度并沒有帶走他們的效力。特別值得注意的是CSS3濾鏡效果，因?yàn)樗鼈冊(cè)趹彝r(shí)將棕褐色和灰度圖像變?yōu)槿噬?/p>

標(biāo)題圖形

這種傾斜的字幕容器，清晰的排版和快速動(dòng)畫的組合是強(qiáng)大的。它也讓人聯(lián)想到電視節(jié)目的開場(chǎng)演出。令人驚訝的是，絕大多數(shù)工作僅由CSS完成。

顯示你的卡片

這是一個(gè)片段，讓人想起有人展開一張紙牌供所有人看。但在這種情況下，它似乎是一個(gè)完美的懸停效果實(shí)現(xiàn)照片畫廊。它不僅看起來(lái)很酷，而且還為用戶提供了一些上下文。

改變現(xiàn)實(shí)

來(lái)吧，玩這個(gè)例子，看看你是否可以保持你的視力。當(dāng)您將鼠標(biāo)懸停在此建筑物的各個(gè)部分上時(shí)，會(huì)根據(jù)光標(biāo)方向移動(dòng)和滾動(dòng)塊。這一切都非常詳細(xì)，令人困惑，令人驚嘆。我們可以再做一次嗎？

把它收集起來(lái)

想要更多令人興奮的樂趣？這是Dimitra Vasilopoulou的另一個(gè)例子，他也創(chuàng)造了上面的真人移位者。在這里，照片似乎在網(wǎng)格布局中分開。快速徘徊將它們?nèi)恐匦陆M合在一起。雖然它不是那么迷幻，但它同樣令人印象深刻。

純CSS的純粹類

這個(gè)懸停效果的集合證明您不需要過分以便給人留下深刻的印象。這里有各種各樣的樣式選項(xiàng)，但每個(gè)樣式都會(huì)在懸停時(shí)顯示文本內(nèi)容和過濾器。并且，沒有使用任何一行JavaScript。

野外的鑰匙（框架）

我們通過這種令人難以置信的CSS“快門”效果來(lái)達(dá)到戲劇與美的交匯點(diǎn)。將這些棕褐色的動(dòng)物插圖徘徊，創(chuàng)造出一種超平滑的過渡到全彩色。它是通過CSS過濾器，關(guān)鍵幀，偽元素和不透明度變化來(lái)完成的。

更大的圖片

照片畫廊如此廣泛，但你看不到許多真正獨(dú)特的畫廊。這是一個(gè)驚人的例外。將鼠標(biāo)懸停在網(wǎng)格中的縮略圖圖像上，全尺寸版本將接管整個(gè)容器。但那只是故事的一半。真正的酷因素來(lái)自圖像“分裂”本身并在加載時(shí)重新組合在一起。

拆分揭示

在這里，我們有一種有趣的技術(shù)來(lái)揭示圖像背后的文字。此代碼段顯示了將圖像“拆分”為條帶的各種方法，從而為秘密消息掃清了道路。由于它有點(diǎn)復(fù)雜，它可能不是您想要在頁(yè)面上重復(fù)使用的東西。但是，通過正確的實(shí)施，您將為您的項(xiàng)目添加創(chuàng)意。

我們有戲劇

為您的網(wǎng)站添加戲劇性的懸停效果是吸引用戶注意力的好方法。上面的例子顯示我們可以在不過分的情況下達(dá)到預(yù)期的效果。你至少不需要一些響亮而討厭的東西。相反，它完全是關(guān)于平滑過渡和引人注目的特效。

讓這些例子激勵(lì)你。然后，嘗試將一些戲劇添加到您自己的圖像中的方法。