过渡动画:
transition 过度动画
四个参数 过渡方式-->过度所需时间-->何种曲线-->--开始时间、、
例如: {
transition width 0.4s ease 0.1s;
}
2Di变形:
transform 2D变形
移动: transform:translate
例如{
transform:translate(x,y); 100px,20px
}
让盒子子盒子水平垂直居中的新方法:
子盒子:{
margin:50% auto; 这里的垂直50%是以左上角定位算的,所有子盒子本身还要在往上除以盒子的高的2倍
再加上这句
transform:translate(0,-50%);x,y 上移盒子本上高度的50%,就可以做到水平垂居中
}
缩放:transform:scale(x,y)
例如div:hover{
transform;scale(0.2);
}
旋转:transform:rotate()
例如 transform(90deg) 90度
注意:设置旋转中心点:transform-origin:right bottom;
斜切:
transform:skew(30deg);
animation 动画
animation:动画名称,动画时间,运动曲线,何时开始,播放次数,是否反方向
animation: move 1.2s linear 0s infinite alternate;
无限重复 反向回来
@keyframes move {
/*from {
transform: scale(1);
background-color: green;
}
to{
transform: scale(1.25);
background-color: red;
}*/
0%{
transform: scale(1);
background-color: yellow;
/*box-shadow: 1px 1px 1px 1px rgba(0,0,0.1);*/
}
50%{
transform: scale(1.2);
background-color: blue;
/*box-shadow: 2px 2px 2px 2px rgba(0,0,0.3);*/
}
100%{
transform: scale(1.7);
background-color: red;
/*box-shadow: 4px 4px 4px 4px rgba(0,0,0.4);*/
}
}