20.6.過渡效果transition · HTML+CSS學習筆記

## 20.6.1.基本概念過渡（transition）是指，能夠讓一個元素的屬性，從某個值，變換到另一個值的時候，不是表現為“立即實現”（突然變化），而是表現為“逐步變化”，則視覺效果看起來就是“動畫效果”了。過渡效果在應用中通常結合鼠標的動作而展現出來，最常見的就是使用“:hover”偽類。過渡效果的設置主要設置如下幾項：參與過渡的屬性名，過渡的時長，過渡的方式，以及過渡發生前的延遲時間。基本演示案例： ![](https://img.kancloud.cn/dc/01/dc017298cff062c3f2545402b7061dc9_639x430.png) ## 20.6.2.主要屬性 * transition-property：要用于實現過渡的屬性名； * transition-duration：過渡時長；比如：2s； * transition-timing-function：過渡方式；常用的過渡方式如下所示： linear：線性過渡。 ease：平滑過渡，這是默認值 ease-in：由慢到快。 ease-out：由快到慢。 ease-in-out：由慢到快再到慢。 * transition-delay：過渡效果發生前的延遲時長，比如：1s。 * transition：以上4屬性的綜合屬性，并可以設定多屬性過渡（比如位置和顏色同時變化)，形式如下： transition：第1個過渡 [，第2個過渡] [，第3個過渡] [......]；每個過渡的形式為：過渡屬性名過渡時長 [過渡方式] [延遲時長]；代碼示例：示例1： ``` transition-property: width; transition-duration: 2s; transition-timing-function: ease-in-out; trasitiion-delay: 3s; ``` 示例2： ``` transition: width 2s ease-in-out 3s; ``` 示例3： ``` transition-property: width, height, background ; transition-duration: 2s 3s 3s; transition-timing-function: ease ease-in-out linear; trasitiion-delay: 3s 2s 0s; ``` 示例4： ``` transition: width 2s ease , height 2s 2s linear, background 2s 4s ; ``` ``` transition-timing-function的效果研究： <style> /*transition-timing-function：過渡方式；常用的過渡方式如下所示： ?linear：線性過渡。 ?ease：平滑過渡，這是默認值 ?ease-in：由慢到快。 ?ease-out：由快到慢。 ?ease-in-out：由慢到快再到慢。 */ .box{ width:1000px; border:solid 1px red; } .box>div{ width:100px; height:50px; border:solid 1px blue; margin:5px; } .box:hover>div{margin-left:850px;} .box>.box1{transition: margin-left 10s linear;} .box>.box2{transition: margin-left 10s ease;} .box>.box3{transition: margin-left 10s ease-in;} .box>.box4{transition: margin-left 10s ease-out;} .box>.box5{transition: margin-left 10s ease-in-out;} </style> </head> <body> <div class="box"> <div class="box1">linear</div> <div class="box2">ease</div> <div class="box3">ease-in</div> <div class="box4">ease-out</div> <div class="box5">ease-in-out</div> </div> </body> ``` ## 20.6.3.案例網頁上一張圖片在鼠標放上去的時候能夠旋轉360并放大到1.5倍，此過程在1秒內以過渡方式完成。如下所示： ![](https://img.kancloud.cn/b9/1f/b91feead1ef7b10e441cb8a810b4450a_1205x478.png) ![](https://img.kancloud.cn/63/b3/63b390fdc0a5a50b73dc6a683e556cf2_606x460.png) ## 20.6.4.綜合案例：芝麻開門完整代碼請看文件“css-day7/4綜合案例：芝麻開門(福倒了).html”。