css過渡，css動畫，頁面佈局分析，表單元素

1、css過渡

/* 1.css樣式在發生變化時，默認是直接變化，沒有過渡的動畫效果 */

/* 將某個樣式設置爲過渡時，這個樣式在發生變化時，會執行過渡動畫 */

 

/* transition-property: background-color; */

/* 2.設置元素過渡的樣式，設置爲all則表示過渡全部的樣式 */

 

/* transition-duration: 0.7s; */

/* 3.設置過渡時間，s 秒，ms 毫秒，1s=1000ms */

 

/* transition-timing-function: linear; */

/* 4.動畫執行速率，linear勻速 */

 

/* transition-delay: 1s; */

/* 5.延時 */

 

 

/*6. transition能夠設置多個過渡樣式 */

/* 樣式 時間 速率 */

transition: all 0.7s linear;

/* 動畫速率默認值爲ease-in-out，先加速後減速 （開始慢中間快最後慢）

ease-in 加速動畫（開始慢最後快）

ease-out 減速動畫（開始快最後慢）*/

 

 

 

/*1.要過渡的樣式必須有初始值,沒有初始值沒法過渡 */

/* 2.並非全部的樣式都能過渡，通常狀況下，和元素外觀有關的樣式都能過渡，好比：color、寬高、左右上下、border、transform等

可是和元素佈局、定位有關的元素，通常不能過渡*/

/* */

 

#box:hover{

background-color: yellow;

 

transform: scale(2,2) rotate(180deg);

border: solid 10px red;

border-radius: 50%;

}

 

/* 當鼠標按下去的時候 */