【零基础学习web前端】CSS3-过渡

Amy

【零基础学习web前端】CSS3-过渡

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

使用CSS3过渡，我们可以通过改变CSS属性来创建动画。

我们可以控制时间，从值到值。

例如，我们可以在一秒钟内将元素的颜色从白色更改为黑色。

下表列出了所有过渡属性：

• transition - 用于设置四个转换属性的简写属性
• transition-delay - 指定过渡效果何时开始
• transition-duration - 指定完成转换所需的秒数或毫秒数
• transition-property - 指定转换所用的CSS属性的名称
• transition-timing-function - 指定转换的速度曲线
  

要使用CSS3过渡创建动画，我们必须指定两个值：

• 更改CSS属性
• 效果持续时间
  
  
  
  

[HTML] 纯文本查看 复制代码

<div>苏飞论坛</div>

[CSS] 纯文本查看 复制代码

div {
        width: 100px;
        height: 100px;
        background: red;
        color: #fff;
        -webkit-transition: height 4s;
        transition: height 4s;
        }

效果：

默认状态下是图一，鼠标经过的时候，高度缓慢增高，鼠标离开再回到图一状态。

我们也可以通过用逗号分隔属性来为多个CSS属性添加过渡效果。

[CSS] 纯文本查看 复制代码

div {
        width: 100px;
        height: 100px;
        background: red;
        color: #fff;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
      transition: width 2s, height 2s, transform 2s;

        }

        div:hover {
            width: 200px;
            height: 200px;
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);

        }

鼠标经过后，红色正方形旋转90度，并且宽和高都增到200px。

liu

强烈支持楼主ing……

站长苏飞

今天写这么多啊，

范范

我只是路过打酱油的。