css动画效果

标签：ase   div   for   round   hover   form   变化   宽度   osi   

１: transition

div {
width: 200px;
height: 100px;
background-color: pink;
　　/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
　　/* transition: width 0.6s ease 0s, height 0.3s ease-in 1s; */
　　/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
　　/*transition: all 0.6s; 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
　　/*默认的是ease 先快在慢*/
　　transition: width 1s,height 2s;


}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */

　　width: 600px;
　　height: 600px;
}

２：transform

div {
　　width: 100px;
　　height: 100px;
　　background-color: pink;
　　/*transform: translateX(x, y)*/
　　/*变形： 移动*/
　　transition: all 0.5s;

}
div:hover {
　　transform: translateX(100px);
　　/*a:active 鼠标没点击没有松开鼠标的时候触发的状态 相当于点击*/
　　/*transform: translate(50px, 50px); 当我们点击之后再移动位置*/
　　/*transform: translate(50px); 当我们点击之后再移动位置 x轴*/
　　/*transform: translate(0, 50px); 当我们点击之后再移动位置 y轴*/
　　/*只跟一个参数就是 X*/
　　/*transform: translateY(100px); 只跟一个参数就是 Y*/
}

例子：让盒子居中

　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);

css动画效果

标签：ase   div   for   round   hover   form   变化   宽度   osi   

原文地址：https://www.cnblogs.com/pxxdbk/p/12559309.html