這篇文章主要講解了“如何用CSS3實(shí)現(xiàn)鼠標(biāo)懸停效果”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何用CSS3實(shí)現(xiàn)鼠標(biāo)懸停效果”吧！

創(chuàng)新互聯(lián)從2013年開(kāi)始，公司以網(wǎng)站建設(shè)、做網(wǎng)站、系統(tǒng)開(kāi)發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶上千余家，涉及國(guó)內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開(kāi)發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過(guò)專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

本文給大家介紹下不需要任何javascript代碼，僅使用純CSS3和HTML實(shí)現(xiàn)鼠標(biāo)懸停的超酷效果，鼠標(biāo)在懸停目標(biāo)元素上的時(shí)候可以實(shí)現(xiàn)常見(jiàn)的線條變化、翻轉(zhuǎn)、縮放、滑動(dòng)等等動(dòng)畫(huà)效果。

HTML

我們?cè)?he_border1里放置一張圖片，以及圖片說(shuō)明信息。

 

               

           

Helloweba

WEB前端應(yīng)用教程+演示+源碼

                   

   

CSS

我們要實(shí)現(xiàn)的效果是，當(dāng)鼠標(biāo)放到圖片上時(shí)，圖片放大，圖片上方將出現(xiàn)一個(gè)帶透明度的遮罩層，并且出現(xiàn)四條線框變化動(dòng)畫(huà)，最終四條線框閉合成方形，在方形里顯示圖片說(shuō)明文字。這種效果在很多圖片站、以及產(chǎn)品列表頁(yè)應(yīng)用非常廣泛。

.he_border1{background:#fe7253;width:360px;height:240px;padding:0;margin:0;border:1px solid #000;position:relative;box-sizing:border-box;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_img{display:block;width:100%;padding:0;margin:0;position:relative;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;opacity:1;overflow:hidden} .he_border1:hover .he_border1_img{position:absolute;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);opacity:.6} .he_border1 .he_border1_caption{color:#fff;padding:0;margin:0;-moz-backface-visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden} .he_border1 .he_border1_caption::before,.he_border1 .he_border1_caption::after{position:absolute;content:'';opacity:0;-webkit-transition:opacity 0.4s,-webkit-transform .4s;-moz-transition:opacity 0.4s,-moz-transform .4s;-o-transition:opacity 0.4s,-o-transform .4s;transition:opacity 0.4s,transform .4s} .he_border1 .he_border1_caption::before{top:8%;right:10%;bottom:8%;left:10%;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);-moz-transform:scale(0,1);-o-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0} .he_border1 .he_border1_caption::after{top:8%;right:10%;bottom:8%;left:10%;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);-moz-transform:scale(1,0);-o-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0} .he_border1:hover .he_border1_caption::before,.he_border1:hover .he_border1_caption::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} .he_border1 .he_border1_caption,.he_border1 .he_border1_caption > a{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden; z-index:1000} .he_border1 .he_border1_caption_h{font-size:1.3em;font-weight:700;text-align:center;width:80%;position:absolute;top:20%;left:10%;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;transition:all .5s ease-in-out;overflow:hidden;opacity:1} .he_border1 .he_border1_caption_p{font-size:1em;text-align:center;width:80%;position:absolute;top:60%;left:10%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;overflow:hidden;opacity:0} .he_border1:hover .he_border1_caption_p{top:45%;opacity:1}

以上代碼充分利用了CSS3的動(dòng)畫(huà)屬性transform的使用，將鼠標(biāo)懸停動(dòng)畫(huà)效果展現(xiàn)出來(lái)。歡迎查看演示DEMO更多的鼠標(biāo)懸停效果：縮放、翻轉(zhuǎn)、滑動(dòng)等等。

感謝各位的閱讀，以上就是“如何用CSS3實(shí)現(xiàn)鼠標(biāo)懸停效果”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何用CSS3實(shí)現(xiàn)鼠標(biāo)懸停效果這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

新聞名稱：如何用CSS3實(shí)現(xiàn)鼠標(biāo)懸停效果-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.xueling.net.cn/article/gcphj.html