<!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. 使用HTML5的canvas做图片剪裁

    前言 图片裁剪上传,不仅是一个很贴合用户体验的功能,还能够统一特定图片尺寸,优化网站排版,一箭双雕. 需求就是那么简单,在浏览器里裁剪图片并上传到服务器. 我第一个想到的方法就是,将图片和裁剪参数(x ...

  2. css form表单样式清除

    开发项目中表单常用的清楚样式: 1.改变placeholder默认字体颜色 ::-webkit-input-placeholder{color: #333;} :-moz-placeholder{co ...

  3. AM335X开发板学习系列——环境搭建（vbox虚拟机ubuntu14.04下minicom的安装和配置）

    这个系列是我学习AM335X的总结. 1. ubuntu虚拟机的USB设备,选择启用usbserial 2. ubuntu虚拟机的网络,采用桥接模式,以保证开发板和ubuntu虚拟机能互相ping通 ...

  4. Windows 解决mysql忘记密码怎么办？

    MySQL有时候忘记密码了怎么办?我给出案例和说明!一下就解决了! Windows下的实际操作如下 1.关闭正在运行的MySQL. 2.打开DOS窗口,转到mysql\bin目录. 3.输入mysql ...

  5. .NET Core中文分词组件jieba.NET Core

    .NET Core中文分词组件jieba.NET Core,由于实际的一些需求,需要做中文分词. 找到了一个jieba.NET https://github.com/anderscui/jieba.N ...

  6. java中使用net.sf.json对json进行解析

    net.sf.json依赖的包很多. 有commons-collections,commons-beanutils.jar,commons-httpclient.jar,commons-lang.ja ...

  7. Linux - 进程间通信 - 匿名管道

    一.概念:进程间通信( IPC,InterProcess Communication) 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进城之间要交换数据必须通过内 ...

  8. python——迭代器和生成器

    1.迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优 ...

  9. 完美实现在同一个页面中使用不同样式的artDialog样式

    偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...

  10. CentOS_5.6下使用cmake编译MySQL_5.5.11教程

    注:资料来自网络    Centos 5.6编译安装mysql 5.5.11 2011年06月24日 星期五 05:33 MySQL 最新的版本5.5.11需要cmake编译安装,估计以后的版本也会采 ...