CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果

這篇文章主要介紹“CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果”，在日常操作中，相信很多人在CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)公司始終堅持【策劃先行，效果至上】的經(jīng)營理念，通過多達十多年累計超上千家客戶的網(wǎng)站建設總結了一套系統(tǒng)有效的推廣解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都塔吊租賃等企業(yè)，備受客戶稱譽。

CSS3感應鼠標的背景閃爍和圖片縮放動態(tài)效果，鼠標滑過時增加了一點動畫效果，當鼠標放在眼睛上的時候，眼睛會閃動幾下，CSS3環(huán)境下運行，ie8不能運行

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3感應鼠標的背景閃爍和圖片縮放動態(tài)效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
/*標題背景*/
h3{background:rgba(0,0,0,0.5);color:#FFF;padding:10px 0;width:300px;text-align:center;transition:opacity 0.5s linear 0s;}
h3:hover{-moz-animation:bg .5s ease-in-out;-webkit-animation:bg .5s ease-in-out;}
h3,a{cursor:pointer;margin:10px auto;}
@-moz-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.5);}
100%{background:rgba(144,24,53,0.18);}}
@-webkit-keyframes bg{0%{background:rgba(144,24,53,0.18);}
25%{background:rgba(144,24,53,0.5);}
50%{background:rgba(144,24,53,0.1);}
75%{background:rgba(144,24,53,0.3);}
100%{background:rgba(144,24,53,0.18);}}
/*放大鏡效果*/
a{display:block;width:50px;height:50px;border-radius:50%;background:#000;transition:opacity 0.2s linear 0s;background:url(/upload/otherpic52/14197.png) no-repeat;}/*就把它當做放大鏡吧*/
a:hover{-moz-animation:heart_beat .5s ease-in-out;-webkit-animation:heart_beat .5s ease-in-out;}
@-moz-keyframes heart_beat{0%{-moz-transform:scale(1)}
25%{-moz-transform:scale(1.70)}
50%{-moz-transform:scale(0.9)}
75%{-moz-transform:scale(1.55)}
100%{-moz-transform:scale(1)}}
@-webkit-keyframes heart_beat{0%{-webkit-transform:scale(1)}
25%{-webkit-transform:scale(1.70)}
50%{-webkit-transform:scale(0.9)}
75%{-webkit-transform:scale(1.55)}
100%{-webkit-transform:scale(1)}}
div{width:500px;margin:0 auto;border:solid 1px #ccc;padding:20px;background:rgba(255,255,255,0.5);text-align:center;}
</style>
</head>
<body>
<div>
<h2>鼠標滑過增加一點動畫</h2>
<h3>前端工程師的生活</h3>
<a></a>
</div>
</body>
</html>

到此，關于“CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁標題：CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/article34/gsjpse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、微信小程序、做網(wǎng)站、軟件開發(fā)、電子商務、網(wǎng)站改版

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

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

CSS3實現(xiàn)感應鼠標的背景閃爍和圖片縮放動畫效果