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

}

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