<!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. 使用FSharp 探索Dotnet图像处理功能2--均衡灰度

    重新捡起大学里的图像处理,好像之前什么都没学到,但是我为什么还留着这本书呢?嘿嘿. 看到均衡灰度处理,上来就是积分,概率分布的公式,头微微的有点疼.网上看了点介绍,隔天再拿起书本,总算有了点眉目.简而 ...

  2. jQuery基础学习(三)—jQuery中的DOM操作

    一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法 ...

  3. 如何掌握并提高linux运维技能

    初中级Linux运维人员们系统学习并迅速掌握Linux的运维实战技能.学习路线大纲如下: 入门基础篇 系统运维篇 Web运维篇 数据库运维篇 集群实战篇 运维监控篇 第一篇:Linux入门(安装.配置 ...

  4. RPC框架原理与实现

    了解一个框架最好的思路就是寻找一个该类型麻雀虽小五脏俱全的开源项目,不负所期,轻量级分布式 RPC 框架 RPC,全称 Remote Procedure Call(远程过程调用),即调用远程计算机上的 ...

  5. android中全局异常捕捉

    android中全局异常捕捉 只要写代码就会有bug,但是我们要想办法收集到客户的bug.有第三方bugly或者友盟等可以收集.但是,android原生就提供了有关收集异常的api,所以我们来学习一下 ...

  6. 常见BOM实用对象

    1.跨浏览器获取窗口左边上边位置 2.IE9+.Chrome.Safari.Opera.Firefox支持下列属性. innerheight 返回浏览器窗口本身的高度. innerwidth  返回浏 ...

  7. 解决Tomcat: Can't load IA 32-bit .dll on a AMD 64-bit platform 问题

    错误如下: java.lang.UnsatisfiedLinkError: E:\Program Files\MyEclipse 10\apache-tomcat-7.0.23\bin\tcnativ ...

  8. Python 三级菜单与优化（一层循环嵌套）

    优化的思路是使用单层循环嵌套完成三级菜单,这个优化思路我非常喜欢,我喜欢在编程的时候用最少的东西写出同样的效果,通常这样会绕来绕去,但非常有趣!!! 需求: 1.运行程序输出第一级菜单: 2.选择一级 ...

  9. Java项目中的一些注意事项

    一.关于包命名方式 例如:com.sun.spring.xxx.service.impl 第一级:公司域名的倒序com.sun 第二级:项目名称spring 第三级:模块信息xxx 第四级:功能顶层包 ...

  10. linux性能之iostat

    在使用linux系统的过程中,总是可能需要当前io性能的状态信息是怎么样?这里就就是一下iostat,可以通过iostat来初步查看io的状态信息. 1.常用方式 iostat -xdk 1 10 或 ...