【新】移动端web（day2）（空间转换+动画）

最新推荐文章于 2023-11-15 12:05:50 发布

原创最新推荐文章于 2023-11-15 12:05:50 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

本文详细介绍了移动端Web中3D空间转换，包括位移、旋转和缩放，以及透视和3D呈现的概念。同时，还探讨了CSS动画的原理，包括关键帧动画的定义和调用，并通过实例演示了人物奔跑和走马灯效果的实现。

1.3D空间转换：

多了一条z轴，z轴位置与视线方向相同往外为正往内为负

①位移：transform：translatex/y/z（距离），translate3D(x,y,z)；没有就写0 不能省略

②旋转：transform：rotatex/y/z（角度），rotate（x,y,z,deg）; 设置自定义旋转轴的位置及角度 x，y，z取值为0-1之间的数字

③缩放：transfrom：scalex/y/z（倍数），scale3D（x,y,z,倍数）；（大于1放大小于1缩小）

左手准则拇指朝正方向手指弯曲方向为旋转正值方向

透视（视距）：perspective：xxpx；（800~1200）（人的眼睛到屏幕的距离）值越小则表示人的眼睛到屏幕的距离越近）（产生一个近大远小的效果）（写在被观察元素的父盒子上）

3D呈现（不常用）：transform-style：preserve-3d（开启）/ flat（不开启）（默认值表示子元素处于2D平面内呈现）；控制子元素是否开启三维立体环境

案例：3D导航

2.动画 animation

过渡：两个状态用过渡

动画：实现多个状态间的变化过程，动画过程可以控制（重复播放、最终画面、是否停止）

动画本质：快速切换大量图片时在人脑中形成具有连续性的画面

构成动画的最小单元：帧或动画帧

使用方法：

①定义动画： @keyframes 动画名称{

from / 0%{}

（动画的开始状态和盒子的默认状态样式相同代码可以省略）

to / 100% {}

}

②调用动画：

animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

（动画名称和时长必须赋值取值不分先后如有两个时间值，第一个时间表示动画时长第二个表示延迟时间）

多个动画动画名称用逗号隔开

速度曲线： linear（匀速补间动画） steps()（逐帧动画配合精灵图使用））

延迟时间：xxxs

重复次数：infinite （无限循环）

动画方向：alternates （带有反向的动画效果）

执行完毕状态：重复次数和动画方向要去除，backwards 停留在最初状态（默认值）

forward（停留在结束时的状态）

案例：人物奔跑

先定义一个显示区域该区域的大小和精灵图的宽高相同（单个精灵图的宽）

在将精灵图设置为背景图再定义动画最后调用

 @keyframes move {
            /* 定义动画 改变背景图的位置 移动的距离是精灵图位置 */
            from{
              background-position: 0 0;
              
            }
            to{
                background-position: -1680px 0;
               
            }
        }

 .box{
   move 5s steps(12) infinite;
  }

案例：走马灯（无缝动画）全民出游案例