技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

純CSS3:鼠標(biāo)移上后(懸停)圖片/文字出現(xiàn)掃光效果

作者:admin    時間:2022-3-26 12:34:25    瀏覽:

在前一文中,我們介紹了純CSS3實(shí)現(xiàn)圖片/logo/文字掃光效果,該掃光效果是加載后自動無限循環(huán)的,本文將更進(jìn)一步,加上鼠標(biāo)懸停事件,即是只有鼠標(biāo)移上去后,圖片/文字才出現(xiàn)掃光效果。

純CSS3:鼠標(biāo)移上后(懸停)圖片/文字出現(xiàn)掃光效果

這個其實(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; /**第一個數(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>

demodownload

代碼解釋

.ilogo:hover:before {} 是表示只有鼠標(biāo)懸停時,才觸發(fā)該(動畫)事件。如果去掉:hover,變?yōu)?code>.ilogo:hover:before {},那么就是自動無限循環(huán)運(yùn)動。

示例是文字掃光效果,如果你要實(shí)現(xiàn)圖片掃光效果,那么把HTML里的文字改為圖片標(biāo)簽<img ...>即可。

4、animation屬性是定義動畫的運(yùn)動方式、運(yùn)動時間等。示例中searchLights是動畫集名稱,2s是動畫(掃光)時間,ease-in是運(yùn)動方式(加速運(yùn)動),0s是動畫延遲(執(zhí)行)時間,即是連續(xù)循環(huán)運(yùn)動不用延遲,infinite是無限循環(huán)運(yùn)動。關(guān)于animation的動畫屬性,可以參考如下文章了解更多:

相關(guān)文章

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */