CSS - 鼠标悬浮 银光 效果

鼠标悬浮，带银光效果

 今天在慕课网上面看到一个 鼠标悬浮出现 银光的效果，故收集起来方便以后使用。

 效果如下：

 撸的代码如下： 

  

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Props</title>
    <style>
        a {
            position: relative;
            float: left;
            overflow: hidden;
        }
        a:before {
            width: 80px;
            height: 350px;
            top:-100px;
            left: -150px;

            content: "";
            position: absolute;
            overflow: hidden;
            background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.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, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
        }
        a:hover::before {
            -webkit-transition: left .8s;
            -moz-transition: left .8s;
            transition: left .8s;
            left: 480px;
        }
    </style>
</head>
    
    <a href="###">
        <img src="img/banner03.jpg" alt="">
    </a>
</body>
</html>

 

参考网站：猛戳这里

 

posted @ 2016-07-28 20:15  温柔的敲敲敲  阅读(231)  评论(0)    收藏  举报