空间转换和动画

发布于：2022-12-26 ⋅ 阅读:(431) ⋅ 点赞:(0)

一.空间转换

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

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

2.空间转换也叫3D转换

3.属性：transform

(1)空间位移:使用translate实现元素空间位移效果

1.语法:

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

2.取值 :（正负均可）

  • 像素单位数值
  • 百分比

(2) 透视:使用perspective属性实现透视效果

1.默认情况下,无法观察到Z轴位移效果,因为Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，所以默认无法观察远近效果

2.属性:（添加给父级）

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

3.作用:

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

(3)空间旋转: 使用rotate实现元素空间旋转效果

1.语法:

  • transform: rotateZ(值);
  • transform: rotateX(值);
  • transform: rotateY(值);

2.左手法则:

  • 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向 

3.拓展:

  • rotate3d(x, y, z, 角度度数) ：用来设置 自定义旋转轴的位置 及旋转的角度
  •  x，y，z 取值为0-1之间的数字

(4)立体呈现: 使用transform-style: preserve-3d呈现立体图形

1.使用perspective透视属性不能呈现立体图形,perspective只增加近大远小、近实远虚的视觉效果

2.立体呈现实现方法:

  •  添加 transform-style: preserve-3d;
  •  使子元素处于真正的3d空间
  •  默认值flat, 表示子元素处于2D平面内呈现

3. 呈现立体图形步骤 :

  • 盒子 父元素添加transform-style: preserve-3d ；
  • 按需求设置子盒子的 位置（位移或旋转）

4.注意:

  • 空间内，转换元素都有自已独立的坐标轴，互不干扰 

(5)3D导航案例:鼠标悬浮导航栏翻转效果

<!DOCTYPE html>
<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>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {

        width: 400px;
        height: 200px;
        margin: 200px auto;
        list-style: none;
        
      }

      li {
        float: left;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;

      }

      li a{
        position: relative;
        display: block;
        width: 100px;
        height: 50px;
        text-decoration: none;
        color: white;
        transform-style: preserve-3d;
        transition: all 1s;
      }

      li span{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100px;
        height: 50px;
      }

      li span:first-child{
        background-color: blue;
        transform: translateZ(25px);
        
      }

      li span:last-child{
        background-color:yellowgreen;
        transform: translateY(-25px) rotateX(90deg);
      }

      li a:hover{
        transform: rotateX(-90deg);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <a href="#">
          <span>首页</span>
          <span>index</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>首页</span>
          <span>index</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span>首页</span>
          <span>index</span>
        </a>
      </li>
    </ul>
  </body>
</html>

 效果图:实现鼠标悬浮翻转效果

 (6)空间缩放:使用scale实现空间缩放效果

1.语法:

  •  transform: scaleX(倍数);
  •  transform: scaleY(倍数);
  •  transform: scaleZ(倍数);
  •  transform: scale3d(x, y, z);

2. z轴缩放需要添加prespective属性和旋转才能可见相应效果

        body{
            perspective: 800px;
        }
        div{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: pink;
            transition: all 1s;
        }

        div:hover{
            /* transform: scaleX(2); */
            /* transform: scaleY(2); */
            /* transform: scaleZ(200) rotateX(90deg); */
            /* 复合写法 */
            transform: scale3d(2,2,20);
        }

二.动画 

1.动画:使用animation添加动画效果

1.过渡与动画之间的区别:

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

2.动画含义与构成:

  •  动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
  • 构成动画的最小单元： 帧或动画帧

2.动画的实现步骤

1.定义动画

@keyframes 动画名称 {

    form {}

    to {}

}

@keyframes 动画名称 {

    0% {}

    10% {}

    15% {}

    100% {}

}

2.定义动画 

animation: 动画名称 动画花费时长;

3.动画属性:使用animation相关属性控制动画执行过程

 1.语法:

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

2.注意 :

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
  • 速度曲线:

  • 动画属性:

  •  

  • 使用steps实现逐帧动画:

  •  

     

4.多组动画 

animation:

动画1,

动画2,

动画N

; 

animation:

run 1s steps(12) infinite,

move 3s linear forwards; 

5.全民出游综合案例 

<!DOCTYPE html>
<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>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      body {
        position: relative;
        background: url(./images/f1_1.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
      }

      .yun1 {
        position: absolute;
        left: 50%;
        top: 30px;
        margin-left: -250px;
        animation: yun1 2s linear infinite alternate;
      }

      .yun2 {
        position: absolute;
        left: 50%;
        top: 120px;
        margin-left: 350px;
        animation: yun2 3s linear infinite alternate;
      }

      .yun3 {
        position: absolute;
        left: 50%;
        top: 160px;
        margin-left: -350px;
        animation: yun3 4s linear infinite alternate;
      }

      @keyframes yun1 {
        100% {
          transform: translate(100px);
        }
      }

      @keyframes yun2 {
        100% {
          transform: translate(100px);
        }
      }

      @keyframes yun3 {
        100% {
          transform: translate(100px);
        }
      }
      .font {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: font 2s;
      }

      @keyframes font {
        0% {
          transform: translate(-50%, -50%) scale(0);
        }

        33% {
          transform: translate(-50%, -50%) scale(1.5) rotateZ(360deg);
        }

        66% {
          transform: translate(-50%, -50%) scale(0.5);
        }

        100% {
          transform: translate(-50%, -50%);
        }
      }

      .lu {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -240px;
        margin-left: 150px;
        animation: lu 1s linear infinite alternate;
      }

      @keyframes lu {
        100% {
          transform: translate(0, -20px);
        }
      }

      .qiu {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -20px;
        margin-left: -440px;
        animation: qiu 1s linear infinite alternate;
      }

      @keyframes qiu {
        100% {
          transform: translate(0, -20px);
        }
      }

      .yi {
        position: absolute;
        bottom: 60px;
        left: 365px;
        animation: yi 1s linear infinite alternate;
      }

      @keyframes yi {
        100% {
          transform: translate(0, -20px);
        }
      }
    </style>
  </head>
  <body>
    <div class="yun1">
      <img src="./images/yun1.png" alt="" />
    </div>
    <div class="yun2">
      <img src="./images/yun2.png" alt="" />
    </div>
    <div class="yun3">
      <img src="./images/yun3.png" alt="" />
    </div>
    <div class="font"><img src="./images/font1.png" alt="" /></div>
    <div class="lu"><img src="./images/lu.png" alt="" /></div>
    <div class="qiu"><img src="./images/san.png" alt="" /></div>
    <div class="yi"><img src="./images/1.png" alt="" /></div>
  </body>
</html>

效果图预览 :

 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布