过渡动画
border-top-left-radius: 100px 50px;左上角为椭圆圆角
border-top-left-radius: 100px;
border-top-right-radius: 100px;左、右上角为正圆圆角
border-radius: 40px;曲率半径为40的圆角矩形
border-radius: 20%;最大200px，20%即40px
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否有阴影
box-shadow:10px 10px 10px 0px #bfa
运动曲线
div:nth-child(1){
/*匀速*/
transition: all 1s linear;
}
div:nth-child(2){
/*开始和结束慢速，中间加速*/
transition: all 1s ease;
}
div:nth-child(3){
/*开始慢速，结尾突然停止*/
transition: all 1s ease-in;
}
div:nth-child(4){
/*突然开始，结束时慢速*/
transition: all 1s ease-out;
}
div:nth-child(5){
/*开始和结束时慢速*/
transition: all 1s ease-in-out;
}
div:nth-child(6){
/*贝塞尔（贝兹）曲线*/
/*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
/*超出再缩回的弹性效果*/
transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
}
div:hover{
width: 1000px;
变形
transform
参数：
translate box的动画不会影响到box2
translate 位移
rotate（度数） 沿z轴旋转（度数）
scaley(倍数) 缩放
skew 斜切
元素
旋转方向判断
1、X轴向右、Y轴向下、Z轴向屏幕外
2、让轴向对着自己，顺时针方向就是该轴向的旋转方向
.box{
width: 300px;
height: 300px;
background-color: gold;
margin: 50px auto 0;
transition: all 500ms ease;
/*设置盒子按3D空间显示*/
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
}
.box:hover{
/*默认沿Z轴旋转*/
/*transform: rotate(45deg);*/
/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/
/*transform: perspective(800px) rotateX(45deg);*/
transform: perspective(800px) rotateY(-45deg);
图片翻面
以下两句是为了演示图片和文字层重叠的效果
transform-style: preserve-3d;
transform: perspective(800px) rotateY(45deg);初始旋转45度
/*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/
backface-visibility: hidden;
transform-style: preserve-3d;
transform: perspective(800px) rotateY(0deg);
transition: all 500ms ease;
tranform:perspective(像素)rptateY(度数)
animation动画
animation: moving 1s ease 1s infinite alternat both;
动画名称、动画、时间、曲线、延迟、循环次数、返回动画
@keyframes moving{
/*初始状态*/
from{
width: 200px;
}
/*结束状态*/
to{
width: 500px;
}
动画
多帧动画
.box{
width: 100px;
height: 100px;
background-color: gold;
margin: 50px auto 0;
animation: moving 1s ease 1s both;
}
@keyframes moving{
0%{
/*位移动画*/
transform: translateY(0px);
background-color: cyan;
}
50%{
transform: translateY(400px);
background-color: gold;
border-radius: 0px;
}
100%{
transform: translateY(0px);
background-color: red;
border-radius: 50px;
}
网友评论