用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; backg…

简单的用jQuery做遮罩效果

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>用jquery做遮罩</title> <style> .all{ width:100%; height:500px; background: red; position: relative; } .mask { width:100%; height:…

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #content article { float: left; margin-right: %; max-width: 236px; position: relative; width: %; margin-bottom: 3.5%; } #…

遮罩效果 css3

CSS3提供了遮罩效果,这是以前CSS2中比较难实现的一个新特性,配合SVG或者canvas同样也可以实现遮罩效果,他的效果就如下图所示: 简单的说就是在一个层上面加一个过滤层,过滤层透明度越低,底层就显示的越多,反之,底层显示越少 1. CSS3属性 CSS3中提供的新属性有(括号为跟background对应类似的属性): -webkit-mask-image:设置遮罩图片地址 -webkit-mask-position: 定义遮罩层的出现位置,可以取值px或百分比,也可以指定为 top le…

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

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…

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

本教程是关于FLASH应用遮罩效果制作好看的图片切换效果.该教程选用FLASH遮罩中最简单的一种作为例子,当然你可以用自己的想象力来做出更多更好的图片动画.希望本教程能带你带来帮助. 让我们先看看效果: 效果预览第一步.打开Flash新建1个图层,用线条工具画一条竖直线,放在相对舞台的左面,第30帧处插入关键帧. 图1 第二步.点击第30帧把竖直线拉到舞台右面. 图2 第三步.点住任意一帧,在属性里面把补间改为形状. 图3 第四步.新建一个图层,和上面一样画一个竖直线,注意的是这次把竖直线从右…

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

text-shadow 其实这东西,跟 box-shadow 差不多,没啥好说的不懂的话,点这里→ css3系列之详解box-shadow . 它只有四个参数 x(第一个值设置x位置) y(第二个值设置y位置) blur(第三个值,设置阴影模糊程度) color(第四个值,设置阴影颜色) 它跟 box-shadow 的差别就是,没有外阴影和内阴影之分. text-shadow 只有外阴影,也就是文字下面的阴影. 本章呢,来利用他实现几个小应用: 浮雕效果:凸出来镂空效果:凹进去…

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

接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动加窃喜,因为看到间歇地有一些来自世界各地的访客,那感觉真是乡下二狗子刚进城啊,现在看来好二. Inspired By 首先要介绍的是灵感来自于,嗯,介绍一下还是有必要的,因为创意这东西,有时候比实际的产品更有意义,也让我们反思为毛外国友人们更具创造性,我们的思维太僵化勒! 最初是受到国外某大大写的一…

CSS3 过滤

CSS3 过滤通过CSS3,我们可以在不适用flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 浏览器支持属性浏览器支持 transition IE10.Firefox.Chrome以及Opera支持transition属性. Safari需要前缀-webkit-. 注释:IE9以及更早的版本,不支持transition属性. 注释:Chrome 25以及更早的版本,需要前缀-webkit-. 它如何工作? CSS3过滤是元素从…

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

刚刚来到实习单位,我跟着廖哥做项目.然后他分配给我一个小小的任务,实现起来总的效果如下: 然后,但我们单击显示数目这个链接的时候,就会弹出一个又遮罩效果的对话框,如下图: 当我们在对话框中再点击里面的超链接的时候,就会显示出相关页面的详细信息,总体的效果就是这样子. 正如雷总所说的,这些东西在项目中都是一些小细节,但是不处理又不行,所以, 总要处理一下.虽然这是一个小问题,但是,缺少了的话又不行,不写了,时间好紧啊...…