CSS3 过滤

通过CSS3,我们可以在不适用flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

浏览器支持

属性 浏览器支持
transition        

IE10、Firefox、Chrome以及Opera支持transition属性。

Safari需要前缀-webkit-。

注释:IE9以及更早的版本,不支持transition属性。

注释:Chrome 25以及更早的版本,需要前缀-webkit-.

它如何工作?

CSS3过滤是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 规定你希望把效果添加到那个CSS属性上
  • 规定效果的时长
        div.transitionOne {
transition: width 3s;
width: 200px;
border: 1px solid red;
height: 100px;
}
div:hover {
width:300px;
border:10px solid red;
}

注释:如果时长未规定,则不会有过滤效果,因为默认值是0.

效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时。当指针移除元素时,他会逐渐变回原来的样子。

多项改变

如需向多个样式添加过度效果,请添加多个属性,用逗号隔开:

        div.transitionOne {
width: 100px;
height: 100px;
border: 1px solid red;
background-color: orange;
transition: width 2s,height 2s,transform 2s;
transform-origin: left top;
} div:hover {
width: 200px;
height: 200px;
transform: skew(30deg,30deg);
}

过度属性

下面表格列出了所有的转换属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

实例1:

        div.transitionOne {
width: 100px;
height: 100px;
transition-property: width;
transition-duration: 2s;
transition-timing-function:linear;
transition-delay: 1s;
background-color: blue;
}
div:hover {
width: 200px;
}

实例2:

简写transition属性

        div.transitionOne {
width: 100px;
height: 100px;
background-color: orange;
transition: width 1s linear 2s;
}
div:hover {
width:200px;
background-color:red;
}

CSS3 过滤的更多相关文章

  1. 用css3过滤做遮罩效果

    <!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...

  2. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

  3. MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  4. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  5. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  6. css3图片模糊过滤特效

    体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. css3的过滤效果

    上面的图片就是css3新特性的滤镜效果,学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~ 好,咱们先把照片后面的白框实现, <style> #div1{ ...

  8. css3图片过滤效果

    在线演示 本地下载

  9. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

随机推荐

  1. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  2. CSS 去除浏览器默认 轮廓外框

    在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消 ...

  3. 请给出异步加载js方案

    请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...

  4. [转]JS继承的5种实现方式

    参考链接: http://yahaitt.iteye.com/blog/250338 虽说书上都讲过继承的方式方法,但这些东西每看一遍都多少有点新收获,所以单独拿出来放着. 1. 对象冒充 funct ...

  5. DeDe调用body文章内容

    {dede:sql sql='select * from dede_addonarticle where aid=3'} <div class="pageArea hide" ...

  6. 插入数据前设置字符编码为utf8

    xxx.php保存时选择utf8编码,页头最好加上 header('conten-type:text/html;charset=utf-8'); 在执行CRUD操作前先执行一下 mysql_query ...

  7. How to create Managed Metadata Column

    This article introduce how to create/use managed metadata column from List. First, we need to config ...

  8. python urllib2

    http://my.oschina.net/duhaizhang/blog/69883

  9. Android UI开发第三十一篇——Android的Holo Theme

    好长时间没写Android UI方面的文章了,今天就闲扯一下Android的Holo主题.一直做android开发的可能都知道,Android 系统的UI有过两次大的变化,一次是android 3.0 ...

  10. HBase MemStoreFlusher

    HBase MemStore Flush由类org.apache.hadoop.hbase.regionserver.MemStoreFlusher实现,具体表现为HRegionServer中的一个实 ...