Web前端开发CSS3动画案例_流光效果

网页前端开发图片|网页设计与前端开发的区别|大连前端开发待遇

代码片段 1

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>css3 流光效果</title>
    <style>
        body {
            text-align: center;
            width: 470px;
            margin: 0 auto;
        }
        .overimg {
            margin: 0 auto;
            position: relative;
            display: block;
            box-shadow: 0 0 10px #FFF;
        }
        .light {
            cursor: pointer;
            position: absolute;
            left: -440px;
            top: 0;
            width: 400px;
            height: 300px;
            border: 0px solid red;
            background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
            background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
            transform: skewx(-25deg);
            -o-transform: skewx(-25deg);
            -moz-transform: skewx(-25deg);
            -webkit-transform: skewx(-25deg);
        }
        .overimg:hover .light {
            left: 510px;
            -moz-transition: 0.5s;
            -o-transition: 0.8s;
            -webkit-transition: 0.8s;
            transition: 0.8s;
        }
        h3 {
            color: red;
        }
    </style>
</head>
<body>
    <div class=”overimg”>
        <a href=”javascript:;”>
            <img src=”http://www.w3cfuns.com/data/attachment/album/201408/19/004620ldgo2c49dda2h64a.jpg” width=”400″ height=”300″>
            <i class=”light”></i>
        </a>
    </div>
    <h3>鼠标经过图片试试!</h3>
</body>
</html>

前端开发要学编译原理|前端开发对英语的要求|web前端开发人员薪资

» 本文来自:前端开发者 » 《Web前端开发CSS3动画案例_流光效果》
» 本文链接地址:https://www.rokub.com/5074.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!