|
|
|
|
|
|
純CSS3：鼠標移上后(懸停)圖片/文字出現掃光效果
作者:admin 時間:2022-3-26 12:34:25 瀏覽:在前一文中，我們介紹了純CSS3實現圖片/logo/文字掃光效果，該掃光效果是加載后自動無限循環的，本文將更進一步，加上鼠標懸停事件，即是只有鼠標移上去后，圖片/文字才出現掃光效果。
這個其實只是在原代碼的基礎上，稍微修改了一下CSS代碼就可以實現。
完整HTML代碼如下：
<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.ilogo {
position: relative;
float: left;
margin: 18px 0 0 5px;
overflow: hidden;
}
.ititle {
font-size: 50px;
}
.ilogo:hover:before {
content: "";
position: absolute;
width: 1000px;
height: 30px; /**白光的寬度，可根據實際調整**/
background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 2s ease-in 1s infinite;
-o-animation: searchLights 2s ease-in 1s infinite;
animation: searchLights 2s ease-in 0s infinite; /**第一個數字參數控制掃光速度，數字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 800px;
}
}
</style>
</head>
<body>
<div class="ilogo">
<h1 class="ititle">
<a href="#">
卡卡測速網 webkaka.com
</a>
</h1>
</div>
</body>
</html>
代碼解釋
.ilogo:hover:before {} 是表示只有鼠標懸停時，才觸發該(動畫)事件。如果去掉:hover，變為.ilogo:hover:before {}，那么就是自動無限循環運動。
示例是文字掃光效果，如果你要實現圖片掃光效果，那么把HTML里的文字改為圖片標簽<img ...>即可。
4、animation屬性是定義動畫的運動方式、運動時間等。示例中searchLights是動畫集名稱，2s是動畫(掃光)時間，ease-in是運動方式(加速運動)，0s是動畫延遲(執行)時間，即是連續循環運動不用延遲，infinite是無限循環運動。關于animation的動畫屬性，可以參考如下文章了解更多：
相關文章
x
