前端基础进阶2

前端基础进阶

空间转换

  • 使用transform属性实现元素在空间内的位移、旋转、缩放等效果

  • 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

  • 空间转换也叫3D转换

  • 属性：transform

空间位移

  • 使用translate实现元素空间位移效果

    • 语法

      • transform: translate3d(x, y, z);

      • transform: translateX(值);

      • transform: translateY(值);

      • transform: translateZ(值);

    • 取值（正负均可）

      • 像素单位数值

      • 百分比


    <html lang="en">
    ?
    <head>
      <meta charset="UTF-8">
      <title>空间位移title>
      <style>
        .box {
          width: 200px;
          height: 200px;
          margin: 100px auto;
          background-color: pink;
          transition: all 0.5s;
        }
    ?
        .box:hover {
          /* transform: translate3d(50px, 100px, 200px); */
          transform: translateX(100px);
          transform: translateY(100px);
          transform: translateZ(100px);
        }
      style>
    head>
    ?
    <body>
      <div class="box">div>
    body>
    ?
    html>

     

透视

  • 使用perspective属性实现透视效果

  • 生活中，同一个物体，观察距离不同，视觉上有什么区别？

    • 近大远小、近清楚远模糊

  • 默认情况下，为什么无法观察到Z轴位移效果？

    • Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

  • 属性（添加给父级）

    • perspective: 值;

    • 取值：像素单位数值， 数值一般在800 – 1200px。

    • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

  • 作用

    • 空间转换时，为元素添加近大远小、近实远虚的视觉效果


    <html lang="en">
    ?
    <head>
      <meta charset="UTF-8">
      <title>透视效果title>
      <style>
        body {
          perspective: 1000px;
          /* perspective: 200px; */
          /* perspective: 10000px; */
        }
    ?
        .box {
          width: 200px;
          height: 200px;
          margin: 100px auto;
          background-color: pink;
          transition: all 0.5s;
        }
    ?
        .box:hover{
          transform: translateZ(200px);
          /* transform: translateZ(-200px); */
        }
      style>
    head>
    ?
    <body>
      <div class="box">div>
    body>
    ?
    html>

     

空间旋转

  • 使用rotate实现元素空间旋转效果

  • 语法

    • transform: rotateZ(值); 围绕中心点旋转

    • transform: rotateX(值); 运动员绕单杠旋转

    • transform: rotateY(值); 兔子围绕钢管舞转

立体呈现

  • 使用transform-style: preserve-3d呈现立体图形

  • 使用perspective透视属性能否呈现立体图形？

    • 不能，perspective只增加近大远小、近实远虚的视觉效果。

  • 实现方法

    • 添加 transform-style: preserve-3d;

    • 使子元素处于真正的3d空间

空间缩放

  • 使用scale实现空间缩放效果

  • 语法：

    • transform: scaleX(倍数);

    • transform: scaleY(倍数);

    • transform: scaleZ(倍数);

    • transform: scale3d(x, y, z);

动画

  • 使用animation添加动画效果

  • 过渡可以实现什么效果？

    • 实现2个状态间的变化过程

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

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

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

  • 实现步骤：

    • 1、定义动画

    • 2、使用动画


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画实现步骤title>
        <style>
            .box {
                width: 200px;
                height: 100px;
                background-color: pink;
    ?
                /* 使用动画 */
                animation: change 1s;
            }
    ?
            /* 一. 定义动画：从200变大到600 */
            /* @keyframes change {
                from {
                    width: 200px;
                }
                to {
                    width: 600px;
                }
            } */
            
    ?
            /* 二. 定义动画：200 到 500*300 到 800*500 */
            /* 百分比指的是动画总时长的占比 */
            @keyframes change {
                0% {
                    width: 200px;
                }
                50% {
                    width: 500px;
                    height: 300px;
                }
                100% {
                    width: 800px;
                    height: 500px;
                }
            }
            
        style>
    head>
    <body>
        <div class="box">div>
    body>
    html>

     

    • 速度曲线即加速减速还是匀速

  • 注意：

    • 动画名称和动画时长必须赋值

    • 取值不分先后顺序

    • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间


    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>animation复合属性title>
        <style>
            .box {
                width: 200px;
                height: 100px;
                background-color: pink;
                /* animation: change 1s linear; */
    ?
                /* 分步动画 */
    ?
                /* 3: 重复3次播放 */
                /* animation: change 1s steps(3) 1s 3; */
    ?
                /* 无限循环 */
                /* animation: change 1s infinite alternate; */
    ?
                /* 默认值, 动画停留在最初的状态 */
                /* animation: change 1s backwards; */
    ?
                /* 动画停留在结束状态 */
                animation: change 1s forwards;
            }
    ?
            @keyframes change {
                from {
                    width: 200px;
                }
                to {
                    width: 600px;
                }
            }
        style>
    head>
    <body>
        <div class="box">div>
    body>
    html>

动画属性

  • 使用animation相关属性控制动画执行过程

  • 使用steps实现逐帧动画

  • 使用steps实现逐帧动画

  • 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

  • animation-timing-function: steps(N)；

    • 将动画过程等分成N份

  • 精灵动画制作步骤

    • 准备显示区域

      • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

    • 定义动画

      • 改变背景图的位置（移动的距离就是精灵图的宽度）

    • 使用动画

      • 添加速度曲线steps(N)，N与精灵图上小图个数相同

      • 添加无限重复效果


    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>精灵动画title>
      <style>
        .box {
          /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
          width: 140px;
          height: 140px;
          /* border: 1px solid #000; */
          background-image: url(./images/bg.png);
    ?
          /* 12: 精灵小图的个数 */
          animation: 
            move 1s steps(12) infinite;
        }
    ?
        @keyframes move {
            from {
              background-position: 0 0;
            } 
            to {
              /* 1680: 精灵图的宽度 */
              background-position:  -1680px 0;
            }
        }
      style>
    head>
    <body>
      <div class="box">div>
    body>
    html>

    效果：小人在原地跑

  • 多组动画

    • 如果想让小人跑远一些，该如何实现？

      • 精灵动画的同时添加盒子位移动画。


    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>精灵动画title>
      <style>
        .box {
          /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
          width: 140px;
          height: 140px;
          /* border: 1px solid #000; */
          background-image: url(./images/bg.png);
    ?
          /* 12: 精灵小图的个数 */
          animation: 
            move 1s steps(12) infinite,
            run 1s forwards
          ;
        }
    ?
    ?
        @keyframes move {
            /* from {
              background-position: 0 0;
            } */
            to {
              /* 1680: 精灵图的宽度 */
              background-position:  -1680px 0;
            }
        }
    ?
        /* 定义一个盒子移动的动画  800px */
        @keyframes run {
          /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
          /* from {
            transform: translateX(0);
          } */
          to {
            transform: translateX(800px);
          }
        }
      style>
    head>
    <body>
      <div class="box">div>
    body>
    html>

     

移动web

相关

移动web_平面转换

标签