1、运动曲线
transition:all 1s linear 匀速运动
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
cubic-bezier(n,n,n,n)缓冲回弹的效果
比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)
曲线设置网站:https://matthewlein.com/ceaser/
圆角:
设置左上角:border-top-left-radius:30px 60px;
分设四角:border-radius:30px 60px 120px 150px;
设置四个圆角相同:border-radius:50%;(此时为正圆)
阴影:box-shadow:h-shadow v-shadow blur spread color inset;
水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
rgba:rgba(0,0,0,0.1)第四个为透明度
transition动画:
transition-property:设置过渡的属性 eg:{transition-property:width/height/background-color}
transition-duration:设置过渡的时间 eg:1s 500ms
transition-timing-function:设置过渡的运动方式
linear:匀速
ease:开始和结束慢速
ease-in:开始是慢速
ease-out:结束时慢速
ease-in-out:开始和结束时慢速
cubic-bezier(n,n,n,n):曲线设置,用时查找
transition-delay:设置动画的延迟
transition: property duration timing-function delay 同时设置四个属性
transform变换:
translate(x,y):设置盒子位移 (x为水平方向上,y为垂直方向上)
scale(x,y):设置盒子缩放
rotate(deg):设置盒子旋转
skew(x-angle,y-angle):设置盒子斜切 (单位为deg)
perspective:设置透视距离(通常设为800px)
transform-style flat | preserve-3d:设置盒子是否按3d空间显示
translateX、translateY、translateZ:设置三维移动
rotateX、rotateY、rotateZ:设置三维旋转
scaleX、scaleY、scaleZ:设置三维缩放
tranform-origin:设置变形的中心点
backface-visibility:设置盒子背面是否可见 {backface-visibility:hidden;(背面不可见)}
animation动画:
@keyframes:定义关键帧动画
animation-name:动画名称
animation-duration:动画时间
animation-timing-function:动画曲线
linear:匀速
ease:开始和结束慢速
ease-in:开始是慢速
ease-out:结束时慢速
ease-in-out:开始和结束时慢速
steps:动画步数
animation-delay:动画延迟
animation-iteration-count:动画播放次数 n|infinite
animation-direction
normal:默认动画结束不返回
Alternate:动画结束后返回
animation-play-state:动画状态
paused:停止
running:运动
小注意点:
羽化大小不可为负
deg为度数单位
perspective一般值为800px
正值沿轴顺时针旋转;负值逆时针旋转