CSS3 过滤
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 过滤的更多相关文章
- 用css3过滤做遮罩效果
<!DOCTYPE html><html ng-app="myApp" ng-controller="myController">< ...
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- css3图片模糊过滤特效
体验效果:点击这里查看效果 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- css3的过滤效果
上面的图片就是css3新特性的滤镜效果,学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~ 好,咱们先把照片后面的白框实现, <style> #div1{ ...
- css3图片过滤效果
在线演示 本地下载
- 实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
随机推荐
- windows8.1 下搭建配置apache+php+mysql
软件版本: apache:Apache 2.4.10 Win64 http://www.apachelounge.com/download/VC11/binaries/httpd-2.4.10- ...
- C++学习笔记6——类的多态
简介: 同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果.在运行时,可以通过指向基类的指针,来调用实现派生类中的方法. 虚函数: 在某基类中声明为virtual并在一个或多个派生类中被重 ...
- UIAlertView的使用方法
UIAlertView的使用方法 1. 最简单的用法 UIAlertView*alert = [[UIAlertView alloc]initWithTitle:@"提示" mes ...
- URL加载系统----iOS工程师必须熟练掌握
URL加载系统----iOS工程师必须熟练掌握 iOS根本离不开网络——不论是从服务端读写数据.向系统分发计算任务,还是从云端加载图片.音频.视频等. 当应用程序面临处理问题的抉择时,通常 ...
- SSS小记
好吧 最终的normal加上去了 不过加在local 上 效果什么的比我预期的好一点 . 还有一点opengl Crack 的原因: 各种program 忘记init 造孽: 还有潜在的memory ...
- POJ3080 Blue Jeans
题目链接. 题目大意: 给定n个字符串,找出最长相同且长度大于3的子串,如果存在多个,找出字典序最小的. 分析: 直接枚举(暴搜). 对于s[0]的每一个子串,判断是否在其它n-1个字符串中都存在. ...
- Java 8 中新的 Date 和 Time 类入门详解
这篇文章主要是java8中新的Date和Time API的实战.新的Date和Time类是java开发者社区千呼万唤始出来的.Java8 之前存在的Date类一直都受人诟病,很多人都会选择使用第三方的 ...
- Java程序员可能犯的3个常见SQL错误
概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...
- 在Android项目中启用Java 8的部分特性--Lambda & Method References
Android N发布时同时发布了一个新的编译工具Jack(AS2.1+支持),基于Jack我们可以使用Java 8 的部分特性,在低版本机器上能使用的更少,同时Jack也有诸多不完善,工具链的改变难 ...
- [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 ...