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; }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。