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 过滤,古老的榕树,5-wow.com

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