移动web——day2

权泉全
148 阅读3分钟

一、空间转换（3D转换）

  • transform：属性实现元素在空间内的 位移、旋转、缩放 效果；
  • 作用改变盒子在3D空间内的形态 位移 旋转 缩放；

1.空间坐标

  • 空间转换也叫3D转换；
  • 用 x 、y 、z 三条坐标轴构成了一个立体空间；
  • Z轴位置与视线方向相同；
  • image.png

2.空间位移

  • translate：实现元素空间位移效果；

语法：

  • transform: translate3d(x, y, z);
  • transform: translateX(值);
  • transform: translateY(值);
  • transform: translateZ(值);

取值：

  • 正负均可
  • 像素单位（px）
  • 百分比（按照自身大小计算）

注意点：

  • Z轴的空间位移看不出效果，因为网页默认平面的；

透视（视距）

  • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
  • 作用: 让Z轴在平面的网页中, 有近大远小的视觉效果；

用法：

  • perspective: 值;
  • 添加给父级；站在目标元素的父级身上, 代替我们的眼睛, 在网页中去观察它。

取值：

  • 像素单位；
  • 通常设置在800-1200px (视觉效果最佳)；

3.空间旋转

  • rotate：实现元素空间旋转效果；

语法：

  • transform: rotateZ(度数);
  • transform: rotateX(度数);
  • transform: rotateY(度数);

取值：

  • deg 角度；
  • transform: rotateX(90deg)；
  • 正负均可, 旋转方向相反；

左手法则：

  • image.png
  • 利用左手法则来快速判断 XYZ 正负值的旋转方向；
  • 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

自定义旋转轴

  • 语法：rotate3D(x, y, z, 角度度数)
  • 取值：
  • x，y，z 取值为0-1数字；
  • transform: rotate3D(1, 1, 0, 360deg);

4.立体呈现

  • transform-style: preserve-3d：呈现立体图形；
  • preserve [维持…的原状]

用法：

  • 给容器添加 transform-style: preserve-3d; 使其内部的子元素处于真正的3D空间；
  • image.png

二、动画属性

  • animation： 添加动画效果；
  • 动画效果：实现多个状态间的变化过程，动画过程可控；

1.关键帧动画

  • 通过设置多个节点（关键帧）来精确控制一个或者一组动画，常用来实现复杂的动画效果

语法：

  • 第一步: 定义关键帧动画:
  • css规定用 @keyframes关键词定义关键帧动画；
  • keyframes[关键帧]
  • 语法一：
 @keyframes 自定义动画名称 {
        from {}

        to {}
    }
  • 语法二
 @keyframes 自定义动画名称 {
        0% {}

        ...% {}

        100% {}
    }
  • 第二步：调用动画
  • @keyframes定义的动画只有调用才能执行否则无效；
  • animation-name: 动画名称;
  • animation-duration: 2s;
  • 注意：动画名称的调用和动画的运动时间必须要写否则动画不会运行；

2.动画属性

image.png

3.动画复合属性

  • 因动画分支属性过多,  所以不需要单独记忆属性名,  只需记忆常用属性值即可；
  • 动画名称和动画时长必须赋值；
  • 取值不分先后顺序；
  • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间；

多组动画调用

  • 开发中一个元素可以同时调用多组动画，animation在调用动画的时候用英文逗号隔开即可；
  • 以下代码就表示我们同时调用了两个动画run1和run2； -比如车轮需要持续滚动的旋转动画, 同时还需要从左往右行驶的位移动画
  • animation: run1 1s infinite, run2 3s linear forwards;

5.逐帧动画

  • 使用steps实现逐帧动画效果；
  • steps[步数] => 简单理解为: 一步一步的去执行动画

语法：

  • animation-timing-function：steps(n)；
  • 将动画过程等分成N份
avatar
文章
阅读
粉丝