css--c3 媒体查询 动画

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