CSSにより高輝度アーク効果を実現-CSSチュートリアル-php.cn

CSSにより高輝度アーク効果を実現

高洛峰

リリース： 2016-10-11 10:35:56

オリジナル

1610 人が閲覧しました

CSS3 を使用して実装されたハイライトアーク効果。マウスを特定の要素の上に置くと、ライトアークが左から右に点滅します:

CSSにより高輝度アーク効果を実現

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <style>
        body{
            margin: 0;
        }
        a.floor{
            display: block;
            height: 475px;
        }
        a.floor:hover:before{
            -webkit-transition: left 1.5s;
            -moz-transition: left 1.5s;
            transition: left 1.5s;
            left: 920px;
        }
        a.floor:before{
            content: "";
            position: absolute;
            width: 80px;
            height: 475px;
            top: 0;
            left: -150px;
            overflow: hidden;
            background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
        }
    </style>
</head>
<body>
<a href="javascript:;">
    <img src="./images/girl.jpg"    style="max-width:90%" width="760" alt="">
</a>
</body>
</html>

ログイン後にコピー

。