這篇文章主要介紹了CSS如何實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、萍鄉(xiāng)網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5技術(shù)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為萍鄉(xiāng)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果在企業(yè)的項目中經(jīng)常會使用到,特別是頂部導(dǎo)航欄,比如:
接下來就是要使用css實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div,img,body{ margin: 0; padding: 0; } .box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; padding: 20px; } .box:hover img{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } img{ margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } </style> </head> <body> <div class="box"> <img src="img/down.png" alt=""/> </div> </body> </html>
這里放了一個盒子,盒子中放了一個圖片,為了能看得更加清晰,這里放一個比較大的圖片。現(xiàn)在要實現(xiàn)的效果是,鼠標(biāo)移到.box的盒子上時,圖標(biāo)img將會做一個180度的旋轉(zhuǎn)。
style中,關(guān)鍵是img和.box:hover img的設(shè)置,首先我們需要先給img設(shè)置transition屬性,這里的屬性指定了動畫的方式和持續(xù)時長。然后給.box設(shè)置當(dāng)鼠標(biāo)上移時:hover時img的動作為旋轉(zhuǎn)180度:
transform: rotate(180deg);
下方的如-webkit-的設(shè)置主要為了兼容各廠商的瀏覽器而設(shè)置的。
得到的效果如下圖所示:
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“CSS如何實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
本文題目:CSS如何實現(xiàn)鼠標(biāo)上移圖標(biāo)旋轉(zhuǎn)效果-創(chuàng)新互聯(lián)
本文URL:http://jinyejixie.com/article14/cceode.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、自適應(yīng)網(wǎng)站、虛擬主機(jī)、網(wǎng)站收錄、網(wǎng)站內(nèi)鏈、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容