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. windows8.1 下搭建配置apache+php+mysql

    软件版本: apache:Apache 2.4.10 Win64    http://www.apachelounge.com/download/VC11/binaries/httpd-2.4.10- ...

  2. C++学习笔记6——类的多态

    简介: 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 虚函数: 在某基类中声明为virtual并在一个或多个派生类中被重 ...

  3. UIAlertView的使用方法

    UIAlertView的使用方法 1. 最简单的用法 UIAlertView*alert = [[UIAlertView alloc]initWithTitle:@"提示" mes ...

  4. URL加载系统----iOS工程师必须熟练掌握

    URL加载系统----iOS工程师必须熟练掌握     iOS根本离不开网络——不论是从服务端读写数据.向系统分发计算任务,还是从云端加载图片.音频.视频等.   当应用程序面临处理问题的抉择时,通常 ...

  5. SSS小记

    好吧  最终的normal加上去了 不过加在local 上 效果什么的比我预期的好一点 . 还有一点opengl Crack 的原因: 各种program 忘记init 造孽: 还有潜在的memory ...

  6. POJ3080 Blue Jeans

    题目链接. 题目大意: 给定n个字符串,找出最长相同且长度大于3的子串,如果存在多个,找出字典序最小的. 分析: 直接枚举(暴搜). 对于s[0]的每一个子串,判断是否在其它n-1个字符串中都存在. ...

  7. Java 8 中新的 Date 和 Time 类入门详解

    这篇文章主要是java8中新的Date和Time API的实战.新的Date和Time类是java开发者社区千呼万唤始出来的.Java8 之前存在的Date类一直都受人诟病,很多人都会选择使用第三方的 ...

  8. Java程序员可能犯的3个常见SQL错误

    概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...

  9. 在Android项目中启用Java 8的部分特性--Lambda & Method References

    Android N发布时同时发布了一个新的编译工具Jack(AS2.1+支持),基于Jack我们可以使用Java 8 的部分特性,在低版本机器上能使用的更少,同时Jack也有诸多不完善,工具链的改变难 ...

  10. [LeetCode] Word Search [37]

    题目 Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fro ...