用css3过滤做遮罩效果 

<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3做遮罩</title>
    <style>
        .all{
            width:100%;
            height:500px;
            background:red;
            position: relative;
        }
        .mask{
            width:100%;
            height:0;
            background:rgba(0,0,0,.5);
            position:absolute;
            transition: height 1s linear 1s;
        }
        .all:hover .mask{
            height:500px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="mask"></div>
    </div>
</body>
</html>

posted on 2017-05-25 17:51  她予旧梦  阅读(667)  评论(1)    收藏  举报

导航