css3中filter的各种效果

css3的-webkit-filter毛玻璃效果:

.blur{
        width: 300px;
        height: 300px;
        -webkit-filter:blur(2px);
        -moz-filter:blur(2px);
        filter:blur(2px);
    }

css3的-webkit-filter阴影效果:

.filter{
        width: 300px;
        height: 300px;
        -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
        filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
    }

css3的-webkit-filter褐色效果:

.filter{
        width: 300px;
        height: 300px;
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
    }

时间: 2024-11-06 07:32:07

css3中filter的各种效果的相关文章

css3中filter的各种特效

css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了.另外ie的滤镜也是可以做到的,会另加讨论. 现在规范中支持的效果有: grayscale 灰度               值为0-1之间的小数 sepia 褐色   值为0-1之间的小数 satur

css3中的2d转换效果和动画

css3中有translate,rotate,scale,skew,等属性值,但是这些属性值都需要写在trasnform中, 例如: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #demo{ width: 200px; height: 200px;

css3中outline切换动画效果

今天刚看了篇文章<纯CSS实现的outline切换transition动画效果> 里面的效果研究了一下,下图为实现时的效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .focus-tra

在CSS3中图片3D翻转效果是这样做到的

今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:http://webfront.verynet.cc/pc/rotate.html 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animation属性,而是采用transition过渡属性.这个属性会将元素在两种效果之间进行切换,并产生一个过渡效果.详情请看代码. HTML结构: 1 <div id="content"> 2 <div class

css3中强大的filter(滤镜)属性

CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web

css3中的filter

在这周的网页中遇见了一个针对我个人而言来说以前不知道的关于css3中的一个新属性,filter.具体是我想让两个背景重叠一部分的情况下,最下层的背景在光感度下呈现出暗色.后面自己通过查询找到了这个filter,并且发现他不止一个属性,有10个.下面就来介绍下我眼中的css3的filter. filter主要是运用在图片上,以实现一些特效. 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色 saturate饱和度 h

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力) 来源:互联网 作者:佚名 时间:03-28 14:17:14 [大 中 小] border-radius:用这个属性能实现圆角边框的效果.现在只有Mozilla/Firefox 和 Safari 3支持该属性. -webkit-border-radius:苹果:谷歌,等一些浏览器认,因为他们都用的是webkit内核: -moz-border-radius:moz这个属性 主要是专门支持M

CSS3中的动画效果-------Day72

还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动起来,倒真不如说成是过渡.当然它另一个局限性,仅仅有当鼠标放上后才干够触发,仅仅是一个样式变成另一个样式,变化也比較单调,而真正的实现动画效果,css3中另一个很有效的方法:@keyframes. 首先.要知道它的规范和使用方法 还记得transition的使用方法么:在初始的样式中增加div{transit

CSS3中动画效果Transitions与Animations的区别

在CSS3中,如果我们使用动画功能,可以使页面上的文字或图像具有动画效果,可以使我们的页面更加生动具有吸引力. 在CSS3中我们可使用的动画功能有两种,Transitions与Animations.下面我们来看看它们两者的区别. 首先来看Transitions功能,它的属性有: transition-property :指定需要平滑过渡的属性 transition-duration :设定平滑过渡使用的时间 transition-timing-function :设定平滑过渡使用的方法 tran