用2D动画做遮罩 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>遮罩</title>
    <style>
        .game-content{
            width:1580px;
            height:799px;
        }
        /*左边部分*/
        .aa{
            width:790px;
            height:799px;
            float: left;
            cursor: pointer;
            position:relative;
            overflow: hidden;
        }
        .game-content-left{
            width:790px;
            height:799px;
            background:url("images/jj_bg.jpg") no-repeat;
            background-size:790px 799px;
            position: absolute;
            left:0;
            top:0;
        }
        .game-content-left-a{
            width:790px;
            height:799px;
            background:rgba(0,0,0,0.5);
            animation: animateDiv1 2s 1;
            display: none;
            position: absolute;
            left:0;
            top:0;
        }
        @keyframes animateDiv1{
            0%{
                transform:translate(0,0);
            }
            100%{
                transform:translate(0,799px);
            }
        }
        .game-content-left-b{
            width:150px;
            height:40px;
            background:#3EC641;
            border-radius: 10px;
            font-size:20px;
            color:white;
            text-align: center;
            line-height:40px ;
            position: absolute;
            left:420px;
            top:650px;
        }
        .game-content-left:hover .game-content-left-a{
            display:block;
        }
/*右边部分*/
        .bb{
            width:790px;
            height:799px;
            float: left;
            cursor: pointer;
            position: relative;
        }
        .game-content-right{
            width:790px;
            height:799px;
            background:url("images/5599_bg.jpg") no-repeat;
            background-size:790px 799px;
            position: absolute;
            left:0;
            top:0;
        }
        .game-content-right-a{
            width:790px;
            height:799px;
            background:rgba(0,0,0,0.5);
            animation: animateDiv 2s 1;
            display:none;
            position: absolute;
            left:0;
            top:0;
        }
        @keyframes animateDiv {
            0%{
                transform:translate(0,799px);
            }
            100%{
                transform:translate(0,0);
            }
        }
        .game-content-right:hover .game-content-right-a{
            display: block;
            position: absolute;
            left:0;
            top:0;
        }
        .game-content-right-b{
            width:150px;
            height:40px;
            background:#3EC641;
            border-radius: 10px;
            font-size:20px;
            color:white;
            text-align: center;
            line-height:40px ;
            position: absolute;
            left:220px;
            top:650px;
        }
    </style>
</head>
<body>
<div class="game-content">
    <div class="aa">
        <div class="game-content-left">
            <div class="game-content-left-a"></div>
            <div class="game-content-left-b">点我试玩</div>
        </div>
    </div>
    <div class="bb">
        <div class="game-content-right">
            <div class="game-content-right-a"></div>
            <div class="game-content-right-b">立即加入</div>
        </div>
    </div>
</div>
</body>
</html>

posted on 2017-05-10 16:20  她予旧梦  阅读(146)  评论(0)    收藏  举报

导航