閃光效果實(shí)現(xiàn)(CSS3)

效果：


閃光效果.gif

實(shí)現(xiàn)原理：
transform: skew(） + transition 實(shí)現(xiàn)

代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                margin: 50px auto;
                width: 430px;
                height: 540px;
                background: url(../img/sg.jpg) no-repeat;
                position: relative;
                overflow: hidden;
            }
            #box #sg{
                width: 30px;
                height: 540px;
                left: -185px;
                background: linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
                background: -moz-linear-gradient(left,transparent,rgba(255,255,255,0.6),transparent);
                position: absolute;
                transform: skew(-30deg,0);
            }
            #box:hover #sg{
                left: 585px;
                transition: left 1s;
                
            }
        </style>
    </head>
    <body>
         <div id="box">
            <div id="sg">
                
            </div>
         </div>
    </body>
</html>

如有問(wèn)題歡迎交流。

如轉(zhuǎn)載請(qǐng)注明出處，謝謝！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容