CSS 过渡例子

过渡例子1

html中

<div id="d1"></div>

css中

#d1{
    width:200px;
    height:200px;
    background:red;
    /*过渡*/
    /*1、过渡属性*/
    transition-property:all;
    /*2、过渡时长*/
    transition-duration:3s;
    /*3、速度时间曲线函数*/
    transition-timing-function:linear;
    /*4、过渡延迟*/
    transition-delay:5s;
}
#d1:hover{
    background:blue;
    border-radius:50%;
    width:400px;
    height:400px;
}

初始样子：

鼠标移上去5秒后：

过滤例子2

html中

<div id="d1">滚</div>

css中

#d1{
    width:100px;
    height:100px;
    border:2px solid #333;
    background:#E4393C;
    border-radius:50%;
    text-align:center;
    line-height:100px;
    font-weight:bold;
    color:#fff;
    font-size:24px;
    /*过渡效果*/
    transition:transform 5s linear;
}
#d1:hover{
    transform:translate(800px) rotate(3600deg);
}

初始样子：

鼠标移上去后：