CSS Note 2.2 transition和transform組合動畫
阿新 • • 發佈：2018-12-18
一、CSS
@charset "UTF-8";
div{
margin: 10px;
padding: 10px;
width: 160px;
height: 80px;
background: chartreuse ;
}
#div1:hover{
background: green;
width: 60px;
transition-property: width;/*設定對寬度進行過渡*/
transition-duration: 1s;/*設定過渡時間*/
transition-timing-function: ease;/*加速過渡;ease-in以慢速開始的過渡，ease-out以慢速結束的過渡，ease-in-out以慢速開始和結束的過渡*/
transition-delay: 0.5s;/*設定延時過渡時間*/
}
#div2:hover{
background: blue;
width: 60px;
transition-property: all;/*對所有屬性過渡*/
transition-duration: 1s;
transition-timing-function: linear;/*勻速過渡*/
}
#div3:hover{
background: red;
width: 60px;
transition: background 3s ease-in-out 3s;/*延時3秒，過渡時間為2s，對背景顏色過渡，過渡是先慢後快再慢*/
}
#div4{
margin: 4px;
padding: 4px;
width: 320px;
height: 200px;
background-color: lightyellow;
border-radius: 10px;
border: 2px brown dashed;
vertical-align: middle;
}
img{
width: 60px;
height: 200px;
}
img:hover{
position: relative;
transform-origin: 50% 50%;
transform: translate3D(200px, -50px ,100px) rotate3D(1,1,1,3600deg) scale(2);
transition: transform 2s ease 0s;
bottom: 20px;
}
二、HTML
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4">
<img src="..\sp\gh1.jpg" alt="test">
<img src="..\sp\gh2.jpg" alt="test">
<img src="..\sp\gh3.jpg" alt="test">
<img src="..\sp\gh4.jpg" alt="test">
<img src="..\sp\gh5.jpg" alt="test">
</div>
</body>三、效果展示
