css3中filter的各种特效】的更多相关文章

css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效). 浏览器兼容性 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了.另外ie的滤镜也是可以做到的,会另加讨论. 现在规范中支持的效果有: grayscale 灰度               值为0-1之间的小数 sepia 褐色   值为0-1之间的小数 satur…
做项目时遇到了一个有趣的css特效. 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了. 现在规范中支持的效果有: grayscale 灰度 值为0-1之间的小数 sepia 褐色 值为0-1之间的小数 saturate 饱和度 值为num hue-rotate 色相旋转 值为angle invert 反色 值为0-1之间的小数 opacity 透明度 值为0-1之间的小数 brightness…
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东.更不是我们一直说的IE滤镜…
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web…
最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇.细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效.不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东.更不是我们一直说的IE滤镜…
上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <t…
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背景图片.不过今天又仔细研究了一下css3中的blur方法,可以实现同样的效果.且配合JS可以实现模糊缩放的效果 CSS代码 .blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10…
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform…
css中filter:alpha透明度使用    使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大家可以参考下 filter:alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=5, finishx=200, finisyY=195) opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明.…
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading的动画效果,最终在我们前端工程师的帮助之下完成.所以记录在这里,如果感兴趣的朋友也可以看看,大家互相焦炉学习. 1.demo.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…
让背景透明,听上去不是挺容易的么? 让背景色透明,很容易想到opacity,要兼容IE的话只要加上filter:alpha(opacity=?)就行了,OK,看看这个例子. html: <div class="container" id="container"> <div class="main" id="main"> <label for="tel">电话:</l…
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法,具体效果可以在在线演示中查看. 你也可以在这里查看在线DEMO演示 说说实现的方法和代码吧,主要由HTML.CSS以及jQuery代码组成. HTML代码: <div id="page_wrap"> <!--Stack 1 --> <div class=&q…
原文:JavaScript + CSS3 实现的海报画廊特效 这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解的知识点以及一些基本思路用注释写在了源码里供以后查阅,同时欢迎指正其中的问题. 源课程视频地址:http://www.imooc.com/learn/366 <!DOCTYPE html> <html> <head> <meta http-equiv="Co…
在设置不透明属性时,经常用opacity来增加层次感或者增加用户体验,但这个属性是css3属性,对于低级浏览器的兼容性来说就达不到预期的效果. 一般而言,我们都尽可能少用一些浏览私有属性-webkit,-moz,-ms,-o,但这也仅仅解决了市面上很多浏览器的问题,面对IE,特别是IE9-版本的,也是显得有气无力. 如果要使得市面上的浏览器达到统一的近类似效果,那么是非常有必要写上IE私有属性,触发IE hasLayout 特性,比如这样: .opacity{ opacity:0.5; filt…
CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效,Loading动画开始时,文字中的水位渐渐上升,为了模拟水位上升的真实效果,水面还会波浪浮动,当Loading动画结束时,文字中的水位又会渐渐退去,动画效果和上升类似,这样周而复始,从而达到很酷HTML5 Loading动画效果.JQuery特效 源代码:http://www.huiyi8.com/sc/8898.html…
先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <me…
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件.使用transform,元素可以安装设定的值变形.旋转.缩放.倾斜. 语法: transform : none | <transform-function> [ <transform-function> ]* 也就是: transform: r…
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&…
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradient那点事儿> 但在实际应用中却不怎么用,主要就是因为自己并没有懂这两个属性的强大之处,再加上自己的想象力实在太差,想不到在什么场景使用它们. 我本来以为它们仅仅是做渐变效果,显然我的想法太狭隘了,它们还有更多的用处. 最近在看<CSS Secrets>,里面就提到了很多CSS使用技巧,下面…
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.…
css3中动画(transition)和过渡(animation)详析…
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法.transitions用法:transition: property duration timing-function其中property表示对哪个属性进行平滑过渡,duration表示在多长时间内完成属性值的平滑过渡,timing-function表示通过什么方法来进行平滑过渡其中包括:linea…
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>rotate使用实例</title> <style> div{ width:200px…
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用 那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran…
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transitionend事件和animationend事件,如果我们需要在动画执行完毕后, 进行一些其他操作,只需要给这两个事件添加相应的回调函数即可. 如果你css基础不够,请看这里: 张鑫大大关于css3动画的简介 如果你向深入研究这个问题,请看这里:蜗牛大大讲transition事件处理 值得注意的是当t…
CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: i…
效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&…
FROM http://www.qianduan.net/understand-the-unit-of-length-in-the-css.html CSS3中的单位: css3中引入了一些新的单位: ch——字符0(零)的宽度: rem——根元素(html元素)的font-size: vw——viewpoint width,视窗宽度,1vw等于视窗宽度的1%: vh——viewpoint height,视窗高度,1vh等于视窗高度的1%: vmin——vw和vh中较小的那个. 显然vw.vh.…
css3中: -o-:opera -moz:firefox -webkit:safari chrome -ms:IE9…
用到CSS3中display的新属性. HTML <div class="parent"> </div> CSS html,body{ width: 100%; height: 100%; } /*方法二*/ body{ display: flex; align-items: center;/****水平居中****/ justify-content: center;/*垂直居中*/ } .parent{ width: 750px; height: 400px;…