css3有哪些不錯(cuò)的hover效果

CSS3在hover下的幾種效果代碼分享，CSS3在鼠標(biāo)經(jīng)過時(shí)的幾種效果集錦

10年積累的成都網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有余杭免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

效果一：360°旋轉(zhuǎn) 修改rotate(旋轉(zhuǎn)度數(shù))

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:rotate(360deg);

09 -webkit-transform:rotate(360deg);

10 -moz-transform:rotate(360deg);

11 -o-transform:rotate(360deg);

12 -ms-transform:rotate(360deg);

13 }

效果二：放大 修改scale(放大的值)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:scale(1.2);

09 -webkit-transform:scale(1.2);

10 -moz-transform:scale(1.2);

11 -o-transform:scale(1.2);

12 -ms-transform:scale(1.2);

13 }

效果三：旋轉(zhuǎn)放大 修改rotate(旋轉(zhuǎn)度數(shù)) scale(放大值)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:rotate(360deg) scale(1.2);

09 -webkit-transform:rotate(360deg) scale(1.2);

10 -moz-transform:rotate(360deg) scale(1.2);

11 -o-transform:rotate(360deg) scale(1.2);

12 -ms-transform:rotate(360deg) scale(1.2);

13 }

效果四：上下左右移動(dòng) 修改translate(x軸,y軸)

01 * {

02 transition:All 0.4s ease-in-out;

03 -webkit-transition:All 0.4s ease-in-out;

04 -moz-transition:All 0.4s ease-in-out;

05 -o-transition:All 0.4s ease-in-out;

06 }

07 *:hover {

08 transform:translate(0,-10px);

09 -webkit-transform:translate(0,-10px);

10 -moz-transform:translate(0,-10px);

11 -o-transform:translate(0,-10px);

12 -ms-transform:translate(0,-10px);

13 }

CSS里的hover樣式

通過hover偽類了可以控制鼠標(biāo)懸停在元素上的樣式

例如，a:hover{color:red}在鼠標(biāo)懸停到鏈接上時(shí)，鏈接變成紅色

css的hover用法

元素添加hover偽類選擇器時(shí)候一定要 緊貼 這hover， 不能有空格 ，有空格的話表示給該元素的所有子元素設(shè)置里hover樣式。

錯(cuò)誤例子：

ul :hover{} //ul的所有子元素設(shè)置了hover樣式

正確例子：

ul:hover{} //ul會(huì)顯示出想要的效果

ul:hover .one{ // 子元素寫在hover后面空格隔開

? ? ? ? ? transform:rotateY(90deg);

? ? ? }

ul:hover .two{

? ? ? ? ? transform:rotateY(0deg);

? ? ? }

ul:hover .thr{

? ? ? ? ? transform:rotateY(360deg);

? ? ? }

僅可以給自身的子元素設(shè)置樣式 ，給其他元素子元素設(shè)置無效

接著上個(gè)例子舉例子：

div:hover .one{}//不顯示任何效果，hover失效

給兄弟元素設(shè)置：

ul:hover+.one

網(wǎng)站欄目：csshover樣式,css里的hover
路徑分享：http://jinyejixie.com/article20/dsedsco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信小程序、App開發(fā)、網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)