<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myController">
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3做遮罩</title>
    <style>
        .all{
            width:100%;
            height:500px;
            background:red;
            position: relative;
        }
        .mask{
            width:100%;
            height:0;
            background:rgba(0,0,0,.5);
            position:absolute;
            transition: height 1s linear 1s;
        }
        .all:hover .mask{
            height:500px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="mask"></div>
    </div>
</body>
</html>

用css3过滤做遮罩效果的更多相关文章

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

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

  2. css3实现图片遮罩效果鼠标hover以后出现文字

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 遮罩效果 css3

    CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...

  4. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  5. Flash 用FLASH遮罩效果做图片切换效果

    本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...

  6. css3系列之text-shadow 浮雕效果，镂空效果，荧光效果，遮罩效果

    text-shadow 其实这东西,跟  box-shadow 差不多,没啥好说的不懂的话,点这里→  css3系列之详解box-shadow  . 它只有 四个参数 x(第一个值设置x位置) y(第 ...

  7. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  8. CSS3 过滤

    CSS3 过滤 通过CSS3,我们可以在不适用flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 浏览器支持 属性 浏览器支持 transition   ...

  9. js弹出对话框，遮罩效果，

    刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...

随机推荐

  1. JVM知识在离线数据中的运用

    又是飞花的季节了.多愁善感的林妹妹看到柳絮说:“嫁与东风春不管,凭尔去,忍淹留.”宝姐姐看了却来一句:“好风凭借力送我上青云”. 特别羡慕情商高的人,经常在想他们是怎么做到的.从来看不出他们不喜欢谁, ...

  2. 为部署ASP.NET Core准备：使用Hyper-V安装Ubuntu Server 16.10

    概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...

  3. SELECT中的多表连接

    MySQL多表连接查询 连接(join):将一张表中的行按照某个条件(连接条件)和另一张表中的行连接起来形成一个新行的过程. 根据连接查询返回的结果,分3类: 内连接(inner join) 外连接( ...

  4. HashMap负载因子

    下面是HashMap的一个构造函数,两个参数initialCapacity,loadFactor 这关系HashMap的迭代性能. /** * Constructs an empty <tt&g ...

  5. commitProperties方法

    自定义的组件,如果重写commitProperties方法,那么在该方法内部一定要注意super.commitProperties()的调用.

  6. "fatal: protocol error: bad line length character: No This"

    git clone 远程地址时候出现 "fatal: protocol error: bad line length character: No This" 错误 在stackov ...

  7. 什么是体数据可视化(Volume data visualization)？及体绘制的各种算法和技术的特点？

    该文对体数据进行综述,并介绍了体数据的各种算法和技术的特点. 前言 由于3D数据采集领域的高速发展,以及在具有交互式帧率的现代化工作站上执行高级可视化的可能性,体数据的重要性将继续迅速增长. 数据集可 ...

  8. DDD理论学习系列（1）-- 通用语言

    1.引言 在开始之前,我想我们有必要先了解以下DDD的主要参与者.因为毕竟语言是人说的吗,就像我们面向对象编程一样,那通用语言面向的是? DDD的主要参与者:领域专家+开发人员 领域专家:精通业务的任 ...

  9. 利用Python进行简单的图像识别（验证码）

    这是一个最简单的图像识别,将图片加载后直接利用Python的一个识别引擎进行识别 将图片中的数字通过 pytesseract.image_to_string(image)识别后将结果存入到本地的txt ...

  10. IOS(一) 基础控件的介绍以及使用

    IOS的界面的制作,相对于Android来说 简洁了很多,虽然创建布局的方式都是两种(代码创建.布局文件) 但是Android中的xml布局文件在某些方面也属于代码创建,因为自己使用到得每一个属性 都 ...