用css3过滤做遮罩效果
<!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过滤做遮罩效果的更多相关文章
- 简单的用jQuery做遮罩效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- css3实现图片遮罩效果鼠标hover以后出现文字
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 遮罩效果 css3
CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层 ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- Flash 用FLASH遮罩效果做图片切换效果
本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果 ...
- css3系列之text-shadow 浮雕效果，镂空效果，荧光效果，遮罩效果
text-shadow 其实这东西,跟 box-shadow 差不多,没啥好说的不懂的话,点这里→ css3系列之详解box-shadow . 它只有 四个参数 x(第一个值设置x位置) y(第 ...
- SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件
接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...
- CSS3 过滤
CSS3 过滤 通过CSS3,我们可以在不适用flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 浏览器支持 属性 浏览器支持 transition ...
- js弹出对话框，遮罩效果，
刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...
随机推荐
- Nest客户端的基本使用方法
通过Nuget安装好Nest的相关Dll,之后我们就可以开始了, 1.初始化Nest客户端 string indexName = "customer"; Uri uri = new ...
- SVG格式转Visio的vsd格式方法，附带C#动态调用Office的Com组件方法
SVG格式可以直接显示在网页上面,用来实现诸如统计Chart图表.流程图.组织结构图的功能.为了使图像可以下载下来以便于修改,可以将SVG转为Visio的vsd格式.方法很简单,主要是使用Visio组 ...
- Twitter数据非API采集方法
说明:这里分三个系列介绍Twitter数据的非API抓取方法. 在一个老外的博看上看到的,想详细了解的可以自己去看原文. 这种方法可以采集基于关键字在twitter上搜索的结果推文,已经实现自动翻页功 ...
- jquery如何设置html众标签中的值
$("img").attr("src",some_url);//jquery设置img标签中的src值 $("#user").val(&qu ...
- sql server 数值的四舍五入
sql中的四舍五入通常会有round 和cast( …… as decimal())两种方式: 个人建议使用cast 方式: 方式1: 经过试验,同样都可以做到四舍五入,但round如下实例1会报 ...
- AngularJS学习笔记2
3.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}.AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. ...
- HDFS中NameNode启动过程
移动到hadoop文件目录下 NameNode启动命令:sbin/hadoop-daemon.sh start namenode DataNode启动命令:sbin/hadoop-daemon.sh ...
- lua table表
lua table表 语法结构 创建一个 table 直接使用 "{}" 即可 table1 = {} -- 赋值 table1["name"] = " ...
- SpringMVC4+MyBatis+SQL Server2014 基于SqlSession实现读写分离（也可以实现主从分离）
前言 上篇文章我觉的使用拦截器虽然方便快捷,但是在使用读串还是写串上你无法控制,我更希望我们像jdbc那样可以手动控制我使用读写串,那么这篇则在sqlsession的基础上实现读写分离, 这种方式则需 ...
- 物理提取大绝招”Advanced ADB”???
近来手机取证有个极为重大的突破,是由手机取证大厂Cellebrite所率先发表的"Advanced ADB" 物理提取方法,此功能已纳入其取证设备产品UFED 6.1之中. 这个所 ...