动画与响应式布局

# 动画

一组动作或多组动作,按一定时间,以一定方式自动完成

优点：效率高，因为是渲染式的，比js体现效率高

关键帧:

@keyframes 通过动画序列中定义的关键帧样式,控制css动画序列的步骤

@keyframes 定义关键帧的名字{}

以百分比来规定改变发生的时间0%~100% 0%代表动画的开始，100代表动画的结束

动画属性

animation-name:关键帧名字;指定动画使用哪个关键帧

animation-duration:5s动画执行的时间

animation-timing-function:linear;

动画的运动方式ease默认...还可以使用贝塞尔曲线steps()逐步 定位end/start

animation-delay:2s;动画延迟时间

animation-iter-count:infinite;动画运动次数,infinite是无限次数

animation-fill-mode:forwards;动画结束后保持结束时的状态forwards

animation-direction:reverse;反向执行动画

- 简写方式

animation:执行时间 延迟时间 关键帧名 运动方式 运动次数 是否停留到结束状态 是否反向执行动画;

执行时间和延迟时间的先后顺序不可调

最简模式：animation:执行时间 关键帧名字;

- 通过伪类触发动画的运动和暂停

animation-play-state:running;运动

animation-play-state:paused;暂停

# 响应式布局

- 媒体查询@media

- 媒体类型

screen:pc/pad/phone

TV

print:打印机

all 所有

- 语法

@media screen and (max-width:700px) {选择器+样式}

@media (max-width:700px) {选择器+样式}

@media screen and (max-width:700px) {} 最大宽度700px,指屏幕宽度以下

@media screen and (min-width:700px) {} 最小宽度700px,指屏幕宽度以上

@media screen and (max-width:700px) and (min-width:900px){} 指700px以上,900px以下的区间

注意:and 前后必须带空格

- 响应式相关单位

%:百分比的宽高,只针对父元素

当父元素没有指定高度,子元素就不能使用%的高度

vw\vh:视口大小决定,宽度整个视口宽100vw,整个视口高度为100vh

vh是可以获取高度的,因为它基于视口高度,不基于某个元素