過渡例子1
html中
<div id="d1"></div>
css中
#d1{
width:200px;
height:200px;
background:red;
/*過渡*/
/*1浩蓉、過渡屬性*/
transition-property:all;
/*2贮庞、過渡時長*/
transition-duration:3s;
/*3审胸、速度時間曲線函數(shù)*/
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);
}
初始樣子：
鼠標移上去后：
