<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- transition:動畫過渡效果屬性 功能：使css的屬性值在一定的時間內平滑的過渡。這種效果可以在鼠標 點擊、划過、獲取焦點或對元素任何改變中觸發，並圓滑的以動畫效果改變css屬性值。 可定義的屬性有： transition-property：設置那些屬性進行過渡，all：所有屬性 transition-duration：完成過渡動畫效果的時間，默認是0 transition-timing-function：設置動畫的緩動效果，默認是ease（逐漸變慢）。 （其他常用值：ease-in，加速；ease-out，減速；ease-in-out，加速然后減速) transition-delay：設置動畫開始的延遲時間，默認是0 示例： 使用transition，實現過渡動畫。一個紅色的正方形，當鼠標移入該區域后，紅色正方形放大一倍，並且顏色變為灰色。鼠標移開，還原到初始狀態。 --> <style> .box{ width: 100px; height: 100px; margin:50px auto; background-color: #f00; /* 為離開的動作也添加過渡效果 */ transition: all 1s ease-in 1s; } .box:hover{ height: 200px; width: 200px; border-radius: 50%; background-color: #666; /* transition-property:width,height,border-radius; transition-duration: 1s; transition-timing-function:ease-in; transition-delay:1s; */ transition: all 1s ease-in 1s; } </style> <body> <div class="box"></div> </body> </html>
Document