用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弹出对话框,遮罩效果,
刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的 ...
随机推荐
- hdoj_2546饭卡(强忍悲痛,好好写题解)
Problem Description 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负) ...
- QQ_MultiTalkServer
package test_teacher;import java.net.*;import java.io.*;public class MultiTalkServer{ public stat ...
- [原]使用MessageAnalyzer实时查看远端日志
1. 下载安装Message Analyzer 从Message Analyzer下载链接下载,安装过程从略. 说明:关于Message Analyzer的视频教程,可以在打开后的主界面上看到. 2. ...
- 表单的序列化ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 关于string类型定义占几个字节??
测试代码: #include <iostream>using namespace std;int main(void){ string name; cout<<"si ...
- kafka集群中常见错误的解决方法:kafka.common.KafkaException: Should not set log end offset on partition
问题描述:kafka单台机器做集群操作是没有问题的,如果分布多台机器并且partitions或者备份的个数大于1都会报kafka.common.KafkaException: Should not s ...
- tablelayoutpanel内部组件变形
tablelayoutpanel设为dock=full后,最大化或最小化窗口会变形. 解决办法:加入flowlayoutpanel,将tablelayoutpanel放入其中,然后在tablelayo ...
- CSAcademy Beta Round #5 Force Graph
题目链接:https://csacademy.com/contest/arhiva/#task/force_graph/ 大意是有若干个节点,每个节点对应一个二维坐标,节点之间相互有斥力存在.同时有些 ...
- 大话PROFINET
1.PROFINET是什么? PROFINET的全称是Process Field Net,是由PROFIBUS国际组织PI(PROFIBUS International)推的出,在IEC61158标准 ...
- MAC系统操作指令汇总
OSX 的文件系统 OSX 采用的Unix文件系统,所有文件都挂在跟目录 / 下面,所以不在要有Windows 下的盘符概念. 你在桌面上看到的硬盘都挂在 /Volumes 下. 比如接上个叫做 US ...