溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3實現感應鼠標的背景閃爍和圖片縮放動畫效果”，在日常操作中，相信很多人在CSS3實現感應鼠標的背景閃爍和圖片縮放動畫效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3實現感應鼠標的背景閃爍和圖片縮放動畫效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS3感應鼠標的背景閃爍和圖片縮放動態效果，鼠標滑過時增加了一點動畫效果，當鼠標放在眼睛上的時候，眼睛會閃動幾下，CSS3環境下運行，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感應鼠標的背景閃爍和圖片縮放動態效果</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(https://cache.yisu.com/upload/information/20210311/295/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實現感應鼠標的背景閃爍和圖片縮放動畫效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
