<!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. 1135: 零起点学算法42——多组测试数据（求和)IV

    1135: 零起点学算法42--多组测试数据(求和)IV Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted ...

  2. 04 Feasibility of Learning

    机器学习是设计算法A,在假设集合H里,根据给定数据集D,选出与实际模式f最为相近的假设g(g可能与f相同,也可能不同). 那什么情况下学习是可行的?即保证g和f是相似的. 1.数据集内的表现g约等于f ...

  3. 如何在Windows系统下安装Linux虚拟机

    先安装虚拟机这个软件,然后在虚拟机里装linux. 1,准备,下载VM虚拟机,链接: http://pan.baidu.com/s/1z79oU 密码: vbap.和linux镜像文件,可以下载ubu ...

  4. QQ_SingleTalkClient

    package test_teacher;import java.io.*;import java.net.*;public class SingleTalkClient{    public sta ...

  5. 一个只有99行代码的JS流程框架

    张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架. 最近一直在想一个问题,如何能让js代码写起来更语义化和更具有可读性. 上周末的时候突发奇想,当代码在运 ...

  6. 【转载】stm32的GPIO八种工作模式

    一.推挽输出:可以输出高.低电平,连接数字器件:推挽结构一般是指两个三极管分别受两个互补信号的控制,总是在一个三极管导通的时候另一个截止.高低电平由IC的电源决定.         推挽电路是两个参数 ...

  7. CF #228 div1 B. Fox and Minimal path

    题目链接:http://codeforces.com/problemset/problem/388/B 大意是用不超过1000个点构造一张边权为1的无向图,使得点1到点2的最短路的个数为给定值k,其中 ...

  8. js解析器(重要!)

    JavaScript有"预解析"的特性,理解预解析是很重要的,不然在实际开发中可能会遇到很多无法解析的问题,甚至导致程序bug的存在. #js预解析执行过程: 预解析:(全局作用域 ...

  9. 安卓Native和H5页面进行交互

    安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用    a)安卓写一个类,里面的方法需要用通 ...

  10. java进制转换（无视正负数的差别）

    最近看了一下学习资料,感觉进制转换其实还是挺有意思的,尤其是对于负数这一方面. 下面和大家分享一下,这里只写了十进制到二进制的转换,其实都是同样的道理 public class Test1 { pub ...