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%;

}

 

/* 当鼠标按下去的时候 */