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 ...
随机推荐
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- CSS 去除浏览器默认 轮廓外框
在默认情况下,点击 a 标签,input,或者添加click事件的时候,浏览器留下一个轮廓外框(chrome之下为蓝色)~ 然而这些默认的轮廓外框,有时候很影响美观,并不是我们想保留的. 我们应如何消 ...
- 请给出异步加载js方案
请给出异步加载js方案,不少于两种 默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很 ...
- [转]JS继承的5种实现方式
参考链接: http://yahaitt.iteye.com/blog/250338 虽说书上都讲过继承的方式方法,但这些东西每看一遍都多少有点新收获,所以单独拿出来放着. 1. 对象冒充 funct ...
- DeDe调用body文章内容
{dede:sql sql='select * from dede_addonarticle where aid=3'} <div class="pageArea hide" ...
- 插入数据前设置字符编码为utf8
xxx.php保存时选择utf8编码,页头最好加上 header('conten-type:text/html;charset=utf-8'); 在执行CRUD操作前先执行一下 mysql_query ...
- How to create Managed Metadata Column
This article introduce how to create/use managed metadata column from List. First, we need to config ...
- python urllib2
http://my.oschina.net/duhaizhang/blog/69883
- Android UI开发第三十一篇——Android的Holo Theme
好长时间没写Android UI方面的文章了,今天就闲扯一下Android的Holo主题.一直做android开发的可能都知道,Android 系统的UI有过两次大的变化,一次是android 3.0 ...
- HBase MemStoreFlusher
HBase MemStore Flush由类org.apache.hadoop.hbase.regionserver.MemStoreFlusher实现,具体表现为HRegionServer中的一个实 ...