Web頁面中5種超酷的Hover效果分享

2022-09-25 11:54:10 字數 2135 閱讀 2182

給平淡的站點帶來活力

hover效果能給網頁增加一些動態效果,並且使得站點更具有活力。原來的做法是使用j**ascript來實現這些動態效果,但是隨著css3的引入和現代瀏覽器的支援,我們可以用純粹的css**來實現這些有趣的效果。所謂的現代瀏覽器,更多的是指以mozilla和webkit為核心的瀏覽器,ie的表現稍微差強人意,所以請使用firefox,safari或者chrome檢視一下的效果。如下就是要介紹的5個非常酷的純css hover 效果。

向上跳躍

這種效果非常適合於當頁面上有一橫排的場景,當滑鼠hover時就產生波浪一樣的效果。

這個效果實現是非常簡單的,並且有多種方法實現,如下的核心實現方法是:初始給所有設定mergin,當hover時,給相應的減少mergin的值,這樣就實現了向上跳躍的效果。

這種效果不光可以應用於,一般的橫向排列的導航欄也可以應用這樣的效果。

效果中的透明效果是並不是必須的,不設定透明屬性並不影響hover時的跳躍效果,加上透明只是為了讓效果更平滑。

css**:

複製**

**如下:

.ex1 img

.ex1 img:hover

檢視demo

層疊與放大

這種效果類似於熔岩燈效果,當滑鼠從上至下移動時,每個都是慢慢地放大然後恢復到原始的狀態。

為了實現這樣的效果,首先把原始顯示的時候縮小一點,當滑鼠hover時,放大的尺寸。

因為是居中顯示的,所以當滑鼠hover時,也增加了的mergin,這樣使得當放大時也是居中的效果。

css程式設計客棧**

複製**

**如下:

/*example 2*/

#container

#ex2 img

#ex2 img:hover

檢視demo

文字淡入

類似的這種效果,一般是用j**ascript來實現的,當hover其中某個元素時,另乙個元素發生一些變化。本例為了實現這一效果,首先把和文字放在乙個div裡,然後設定div的color:transparent和line-height:0px。當hover時,更改color和line-height屬性,使得文字顯示。

css**

複製**

**如下:

#ex3

#ex3:hover

#ex3 img

檢視demo

旋轉的

實現這個效果是非常容易的,但是因為這是乙個非常重要的效果,尤其對於畫廊中的縮圖。這個效果中我們使用了一些較新的css樣式。這個例子使用了box-shadows,transitions和transforms。transform是實現旋轉部分,transition是為了讓效果更平滑。

css**

複製**

**如下:

#ex4

#ex4 img

#ex4 img:hover

檢視demo

淡入和倒影

這個效果是相對複雜的效果,首先,設定減少的初始的透明度,當hover時,把透明度設定回預設值,另外會有乙個邊緣發光的效果和倒影www.cppcns.com效果(只在以webkit為核心的瀏覽器中起作用)。

如果你對倒影效果不太懂的話,可以參考這篇文章(image reflections with css)

css**

複製**

**如下:

#ex5

#ex5 img

#ex5 img:hover

檢視demo

經過測試,這些效果在以webkit為核心的瀏覽器上表現最出色,mozilla次之,ie最差,如果要使得在ie9中的效果更好,則需要其它的第三方js庫。以上的這五個純css實現的hover效果,應該會給你帶來一些設計上的靈感,你可以綜合運用這些css樣式,並加入一些其他的css來產生一些有意思的效果。如果你也有一些非常酷的css效果,歡迎參與討論。

以上的五種css hover效果都應用了最新的css3效果,在現代的瀏覽器中,應用這些css能展現出非常漂亮的效果。值得一提的是ie9,ie9不支援transition和transform這兩種效果,使得這五種效果在ie9下表現的不佳,寄希望於ie10吧。

本文標題: web頁面中5種超酷的hover效果分享

本文位址:

web中實現動畫的5種方式及例項

1.css3的transition 例項 滑鼠移入時盒子寬度逐漸變大為300px 2.css3的animattion keyframes 例項 盒子左右無限迴圈運動 3.使用window.settimout 或者window.setinterval 例項 盒子左右無限迴圈運動 此方法的缺點是,可能會...

在web頁面中引用css的四種方法

作為一名前端開發工程師,平時在製作頁面的時候,我們我們會用到很多中將css引入頁面的方法,那麼,今天我將分享一下這些方法,並討論那種方法更好一些。這種方法是最好的一種,在頁面的標籤中加入如下 import 可以放在頁面的style標籤裡面,也可以方式在css樣式表裡面。如果放在css樣式檔案裡面,它...

web前端頁面訪問的兩種方式

有人會問了 同樣是web前端的專案,為什麼用模組化 ng react vue 開發的專案必須得tomcat http server等伺服器才能正常訪問呢?而普通的專案檔案能直接訪問。其實很簡單,就是因為index檔案引入的其他檔案是絕對路徑,注意是路徑問題。因為vue cli的預設配置中,publi...