<!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>

用2D动画做遮罩的更多相关文章

  1. 2D动画的制作

    通过css3的transform  transition可以实现平移,旋转,缩放,拉伸等效果 1.缩放 -webkit-transform: scale(1); -moz-transform: sca ...

  2. Unity3D初学之2D动画制

    作者:Alex Rose Unity最近宣布推出额外的2D游戏支持,添加了Box 2D物理和一个精灵管理器. 但这里还是有些技巧需要牢记在心.逐帧更改图像只是动画制作的冰山一角,若要让你的游戏出色运行 ...

  3. 手游[追忆之青]动画导演:2D动画制作技巧

    转自:http://www.gamelook.com.cn/2016/09/264591 GameLook报道/由一般法人计算机娱乐协会(CESA)主办的CEDEC2016日前在日本横滨举行,诸多开发 ...

  4. css3-11 如何实现2D动画

    css3-11 如何实现2D动画 一.总结 一句话总结:就是transform属性,属性值为1.translate()    2.rotate()    3.scale(),而这是哪个属性值是带参数的 ...

  5. 2D动画如何做出3D体积感

    https://cowlevel.net/article/1959026 <AngerForce>幕后故事 这篇文章是个老坑,最近有时间开始写,也是对之前项目的一个总结和记录吧. 本篇文章 ...

  6. Unity3D 之2D动画机

    这里来讲解一下2D动画机的使用 2D的时候,默认的情况下,可以调用默认的站立之类的动画,然后通过触发,可以变化自己的动画. 一:将一个图切成一些一个元素 二:创建一个精灵,给精灵添加一个动画机 三:给 ...

  7. 用css3过滤做遮罩效果

    <!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...

  8. 简单的用jQuery做遮罩效果

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. css 2D动画

    2D动画: 通过 CSS3  transform转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D移动:translate().使用translate()函数,你可以把元素从原来的位置移动. ...

随机推荐

  1. Andorid开发中如何去除标题栏title

    有两种方法可以去除标题栏的title. 1.在代码中实现 在setContentView()方法之前加上这一句 requestWindowFeature(Window.FEATURE_NO_TITLE ...

  2. mpush 服务器环境配置安装 CentOS 7 and Windows

    github-doc https://github.com/mywiki/mpush-doc/blob/master/SUMMARY.md Introduction 1.服务器环境 2.安装Redis ...

  3. MYSQL安装(Linux)

    1.首先检查下系统是否已经有mysql相关的安装项 rpm -qa|grep mysql 2.如果有,先删除 rpm -e --nodeps mysql-libs--.el6_5.×86_64 3.接 ...

  4. .NET产品源码保护，.NET防止反编译，c#/vb.net 防反编译

    .NET产品源码保护产生的背景: .NET源码加密方案支持C#及VB.NET等语言开发的ASP.NET及WINFORM应用.利用.NET支持托管代码与非托管代码共存的特性,将C#代码经过处理放于非托管 ...

  5. Linux - 进程调度算法

    进程调度: 无论是在批处理系统还是分时系统中,用户进程数一般都多于处理机数.这将导致它们互相争夺处理机.另外,系统进程也同样需要使用处理机. 这就要求进程调度程序按一定的策略,动态地把处理机分配给处于 ...

  6. Javascript的内容

    JS简介和变量 {JS的三种方式}            1 HTML中内嵌JS(不提倡使用)            <button onclick="javascript:alert ...

  7. Json对象和Json字符串之间的转换

    json字符串转json对象,调用parse方法: var b='{"name":"2323","sex":"afasdf&quo ...

  8. css代码实现

    纯 CSS 实现下面我们探讨下,使用纯 CSS 的方式能否实现. hover 伪类实现 使用 hover 伪类,在鼠标悬停在按钮上面时,控制动画样式的暂停. 关键代码如下: <div class ...

  9. JS + HTml 时钟代码实现

    JS+ Html 画布实现的时钟效果图: 闲来无聊做了一个网页的时钟,效果模拟传统时钟的运行方式, 运用了html 的画布实现指针,背景图片引用了网络图片. 具体原理: 首先将时钟分为四个不同区域,对 ...

  10. 线下市场，选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...