<!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. 机器学习-scikit learn学习笔记

    scikit-learn官网:http://scikit-learn.org/stable/ 通常情况下,一个学习问题会包含一组学习样本数据,计算机通过对样本数据的学习,尝试对未知数据进行预测. 学习 ...

  2. windows环境搭建jira 详解

    一.事前准备 1:JDK下载并安装:http://www.oracle.com/technetwork/java/javase/downloads/index.html2:MySQL JDBC连接驱动 ...

  3. 看Lucene源码必须知道的基本概念

    终于有时间总结点Lucene,虽然是大周末的,已经感觉是对自己的奖励,毕竟只是喜欢,现在的工作中用不到的.自己看源码比较快,看英文原著的技术书也很快.都和语言有很大关系.虽然咱的技术不敢说是部门第一的 ...

  4. Java基础学习(三)—面向对象(上)

    一.理解面向对象       面向对象是一种思想,是基于面向过程而言的,就是说面向对象是将功能等通过对象来实现,将功能封装进对象之中,让对象去实现具体的细节:这种思想是将数据作为第一位,而方法或者说是 ...

  5. 简聊iOS支付集成(支付宝和微信支付)

    一.支付集成是什么 1.现在大部分app都有快捷支付功能,支付集成将第三方支付平台集成到自己的项目中,能够完成自己项目中的支付功能, 二.支付集成的使用 <1>.支付宝: 下载SDK和De ...

  6. 锋利的jQuery（1）——DOM对象与jQuery对象的转换

    1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DO ...

  7. seo从业者发展方向

    对于很多朋友来说,seo就是一项比较简单的技能,内容+外链,就可以基本囊括seo的基本内容了.可能很多朋友对此不屑一顾,会说seo可是包含万象, 你需要懂网页设计.标签设计,分词优化.企业建站等等方面 ...

  8. ios app网址说明

    URLforBrowser = 'https://itunes.apple.com/cn/app/wan-huo-shi-shang-zhu-li-ren/id1077705***'; URLfori ...

  9. shell初步了解

    shell的类型 查看用户所用的shell程序,在/etc/passwd 文件中的第七个字段(好像就是最后一个,主要是bash shell) 还有一个默认shell是/bin/sh,它作为默认的系统s ...

  10. 如何修改Xampp服务器上的mysql密码

    今天自己在搞php的过程中发现,如果我们使用Xampp服务器自带数据库mysql,就必须先修改mysql的密码,大家都知道,mysql的初始面为空,但是如果连接数据库是密码为空就会报错,在网上查找了很 ...