2019.7.21
媒体查询
针对不同屏幕设置不同样式
transform
移动:translate()
旋转:rotate()
缩放:scale()
倾斜:skew()
transform:translate(水平位移,垂直位移)
值为正值,水平向右,垂直向 下,负值,水平向左,垂直向上
transform:rotate(旋转)
transform-origin:旋转参考点 (left right top bottom 百分比 精确值)
语法:
transform-origin(x坐标,y坐标)
transform:scale(缩放) 值大于1,表示放大 值在0-1之间表示缩小,一个值表示水平垂直都缩放,2个值表示水平和垂直方向
transform:skew(倾斜) 表示沿X轴 和Y轴进行倾斜得到的效果
过渡动画
过度:transition:属性 时间 过度方式;
属性:具体属性值,transform,all(全部)
时间:s 秒
过度方式:
linear 匀速
ease 慢 快 慢
ease-in 以慢开始
ease-out 以慢结束
ease-in-out 以慢开始和结束
变形综合一起使用:
transform:rotate() translate() 注:中间用空格间隔就可以
自定义动画
步骤:
定义动画:
@keyframes name{
0%{}
100%{}
}
调用:
animation:name 1s linear 2s infinite;
name:定义的动画名称
1s动画执行的时间
linear动画的运行方式
2s 表示动画延迟时间
infinite 表示循环
语法:animation:动画名称 运行时间 运行方式 延迟时间 循环次数 是否逆向 不播放时应用样式 是否暂停
运行方式:linear ease ease-in ease-in-out ease-out
循环:数字或infinite(无限循环)
是否逆向:alternate
不播放时应用样式:forward 动画结束后停止到动画结束时的状态,(不恢复回去)
是否暂停: paused/running