<!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. 我的iOS-App

    1.PocketConfidential(密保箱) 简介 保存账号密码等敏感信息. 应用技术: sqlite.sqlcipher加密.AES数据加密.GCD https://itunes.apple. ...

  2. JavaScript 数组操作方法

    这些数组的操作方法会改变原来的数组.在使用 Vue 或者 Angular 等框架的时候会非常实用,使用这些方法修改数组会触发视图的更新. Array.prototype.push 该方法可以在数组末尾 ...

  3. 跟着刚哥梳理java知识点——深入理解String类（九）

    一.String类 想要了解一个类,最好的办法就是看这个类的实现源代码,来看一下String类的源码: public final class String implements java.io.Ser ...

  4. 图文详解linux如何搭建lamp服务环境

    企业网站建设必然离不开服务器运维,一个稳定高效的服务器环境是保证网站正常运行的重要前提.本文小编将会详细讲解Linux系统上如何搭建配置高效的lamp服务环境,并在lamp环境中搭建起企业自己的网站. ...

  5. Linux下Memcached的安装步骤

    一.安装gcc# yum -y install gcc 二.安装libevent# wget http://www.monkey.org/~provos/libevent-2.0.12-stable. ...

  6. 使用 ItextSharp HTML生成Pdf（C#）

    以前生成pdf的时候.因为生成的pdf数据是固定的,所以先做好pdf模板,动态的数据可以先用占位符 生成的时候.找到占位符坐标.把数据填充进去 优点:先做好模板.生成的pdf 表格.文.内容会好看一些 ...

  7. Python-一些实用的函数

    一,返回值为bool类型的函数 1.any()函数 any(iterable)->bool 当迭代器中有一个是Ture,则返回Ture:若interable=NUll,则返回False. > ...

  8. 不完全图解HTTP

    在2D平面上行走的时候,认识只局限于“点”,刚认识一个新的点,就把之前的那个点忘记了,捡了芝麻丢西瓜.只从3D视角俯瞰时,把这些点连接在一起,点成线,线成面时,才能有所顿悟.话不多说,这是我对HTTP ...

  9. 通过 U 盘启动重装 macOS 系统

    重装系统是工作和生活中经常需要做的事情,作为一名开发人员,学会该技能你才是一名合格的程序猿!以后再也不会遇到"程旭元你会装系统吗?"的尴尬了!本文主要介绍怎样通过U盘启动重新安装 ...

  10. poj1159二维树状数组

    Suppose that the fourth generation mobile phone base stations in the Tampere area operate as follows ...