一.API
值 | 描述
transition-property | 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration | 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function | 規定速度效果的速度曲線。
transition-delay | 定義過渡效果何時開始。二.使用
下面的代碼中:
transition-property: all;中all指代width和height,因爲最終改變了width和height2個屬性
-------------------------html----------------------------
<div></div>
-------------------------css----------------------------
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: .18s;
transition-delay:.18s;
}
div:hover {
width: 400px;
height:400px;
}三.製作效果
思路是:
在元素初始狀態使用transform定義動作起始狀態
在元素結束狀態(例如hover時)使用transform定義動作結束狀態
在有動作的元素本身上定義transition
hover結束動作還是回到初始狀態<!DOCTYPE html>
<html>
<head>
<title>測試</title>
<style type="text/css">
.wrapper{
width: 300px;
height: 350px;
padding: 10px;
border: 1px solid #ccc;
/*overflow: hidden;*/
}
.wrapper img,.wrapper figcaption{
transition: all 0.5s ease-in 0.1s;
}
/* img旋轉360deg飛入 */
.wrapper img{
transform: translate(-300px,0px) rotate(0deg);
}
.wrapper:hover img{
transform: translate(0px,0px) rotate(360deg);
}
/* 文字由下向上 */
.wrapper figcaption{
transform:translate(0px,100px);
opacity: 0;
}
.wrapper:hover figcaption{
transform:translate(0px,0px);
opacity: 1;
}
</style>
</head>
<body>
<figure class="wrapper">
<img src="mm1.jpg">
<figcaption>
<h1>美女</h1>
<p>很好看的美女</p>
</figcaption>
</figure>
</body>
</html>
