移动web第三天

动画

1.定义动画

@keyframes 动画名称（自己起动画名称要英文的）

2.使用动画

(一个元素可以使用多个动画！！！)

给那个元素使用动画就在那个元素写css animation属性

1 animation: 动画名称播放时间; （必须写的两个属性值）

animation: ani 5s;

2 动画名称-animation-name:ani;

3 动画播放的时间-animation-duration: 5s;

4 动画的延迟时间-animation-delay: 3s;

5 动画正常播放之外的状态（延迟、播放结束）

在延迟的时间内

1 显示的是自身的颜色属性

2 设置在延迟的时间内显示 0% 画面 backwards

animation-fill-mode:backwards;

3 整个动画播放完毕了动画停留在最后一帧的画面还是回到自身的属性画面上 默认是回到自认属性上的

设置动画播放完毕了停留在最后一帧画面

animation-fill-mode:forward;

4 both -同时设置了 backwards 和 forwards

animation-fill-mode: both;

5 设置动画播放次数：取值为具体数字 or infinite（无限）

animation-iteration-count: infinite;

6 设置动画的播放方向 animation-direction

1 默认值 normal 先正再正常用

2 alternate 先正再反常用

3 reverse 先反再反

4 alternate-reverse 先反再正

7 速度曲线

1 设置元素变化的时候匀速变化还是先快后慢先慢后快

2 匀速最常用！！ linear

animation-timing-function:linear;

3 ease 先慢后快默认

animation-timing-function:ease;

4 steps 跳跃的速度曲线！通常搭配精灵图实现动画效果

animation-timing-function:steps(26次数);

8 设置动画暂停 paused 播放 running 默认值 （通常搭配hover使用暂停or播放）

animation-play-state: paused;

3.steps使用注释

ul::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: aqua;
        top: 0;
        left: 0;
        opacity: 0.7;

        /* animation: ani 4s infinite linear; */
        /* 跳跃性 速度曲线 */
        /* 动画结束了 停留在最后一帧 */
        /* 
        实用技巧
        1 ul是多宽  设置 位移多宽 400px
        2 你想要分几步  写几 
        3 不要写上 forwards
        4 加上无限播放
         */
        animation: ani 4s steps(4) infinite;
        /* 
        animation-fill-mode: forwards;
        当动画结束了 回到第一帧的画面
         */
      }

移动端屏幕知识（了解即可）

逻辑分辨率--软件设置

设备分辨率--出厂决定的不同设备同分辨率

PPI--一倍屏幕两倍屏幕三倍屏幕

srcset属性-- 移动设备根据自身的ppi自动挑选相应清晰度的图片

各大it公司直接使用高清图 3倍图或者2倍即可

布局视口--以前使用的手机端布局

理想视口--目前使用的手机端布局