|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS3：鼠標(biāo)移上后(懸停)圖片/文字出現(xiàn)掃光效果
作者:admin 時(shí)間:2022-3-26 12:34:25 瀏覽:在前一文中，我們介紹了純CSS3實(shí)現(xiàn)圖片/logo/文字掃光效果，該掃光效果是加載后自動(dòng)無限循環(huán)的，本文將更進(jìn)一步，加上鼠標(biāo)懸停事件，即是只有鼠標(biāo)移上去后，圖片/文字才出現(xiàn)掃光效果。
這個(gè)其實(shí)只是在原代碼的基礎(chǔ)上，稍微修改了一下CSS代碼就可以實(shí)現(xiàn)。
完整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; /**白光的寬度，可根據(jù)實(shí)際調(diào)整**/
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; /**第一個(gè)數(shù)字參數(shù)控制掃光速度，數(shù)字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 800px;
}
}
</style>
</head>
<body>
<div class="ilogo">
<h1 class="ititle">
<a href="#">
卡卡測速網(wǎng) webkaka.com
</a>
</h1>
</div>
</body>
</html>
代碼解釋
.ilogo:hover:before {} 是表示只有鼠標(biāo)懸停時(shí)，才觸發(fā)該(動(dòng)畫)事件。如果去掉:hover，變?yōu)?code>.ilogo:hover:before {}，那么就是自動(dòng)無限循環(huán)運(yùn)動(dòng)。
示例是文字掃光效果，如果你要實(shí)現(xiàn)圖片掃光效果，那么把HTML里的文字改為圖片標(biāo)簽<img ...>即可。
4、animation屬性是定義動(dòng)畫的運(yùn)動(dòng)方式、運(yùn)動(dòng)時(shí)間等。示例中searchLights是動(dòng)畫集名稱，2s是動(dòng)畫(掃光)時(shí)間，ease-in是運(yùn)動(dòng)方式(加速運(yùn)動(dòng))，0s是動(dòng)畫延遲(執(zhí)行)時(shí)間，即是連續(xù)循環(huán)運(yùn)動(dòng)不用延遲，infinite是無限循環(huán)運(yùn)動(dòng)。關(guān)于animation的動(dòng)畫屬性，可以參考如下文章了解更多：
相關(guān)文章
- 站長推薦
