移动web02

Hsu_Ee
109 阅读1分钟

一、空间转换

1.空间转换
   a.空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
   b.空间转换也叫3D转换。
   c.属性：transform
2.空间位移
  • 语法
    • transform: translate3d(x, y, z);
    • transform: translateX(值);
    • transform: translateY(值);
    • transform: translateZ(值);
  • 取值(正负均可)
    • 像素单位数值;
    • 百分比;
3.透视效果
  • 目标：使用perspective属性实现透视效果
<style>
      /* 透视，视距，景深 设置给使用了3d元素的最近一级的父元素（亲爸爸） */
      body {
        /* 
        pp给谁添加？给具有3d属性的盒子的最近一级父元素添加

        pp是什么意思？视距，透视，景深

        pp给了之后会实现什么效果？近大远小，近实远虚

        pp是怎么理解的？例如 pp:800px?==>起始距离屏幕800px的地方安排一只眼睛去看屏幕
        */
        /* 视距 pp 400px~1200px */
        perspective: 800px;
      }
      .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 0.5s;
      }

      .box:hover {
        transform: translateZ(400px);
      }
    </style>
4.空间旋转
  • 空间旋转Z轴
<!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>空间旋转-Z轴</title>
    <style>
      .box {
        width: 300px;
        margin: 100px auto;
      }

      img {
        width: 300px;
        transition: all 2s;
      }

      .box img:hover {
        transform: rotateZ(-360deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/hero.jpeg" alt="" />
    </div>
  </body>
</html>
  • 空间转换X轴
<!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>空间旋转-X轴</title>
    <style>
      body {
        background-color: #333;
      }
      .box {
        width: 200px;
        margin: 100px auto;
        /*添加视距*/
        perspective: 400px;
      }
      img {
        width: 200px;
        transition: all 2s;
      }
      .box img:hover {
        transform: rotateX(-45deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/pk1.png" alt="" />
    </div>
  </body>
</html>

X轴.png

  • 空间转换Y轴
<!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>空间旋转-Y轴</title>
    <style>
      body {
        background-color: #333;
      }
      .box {
        width: 200px;
        margin: 100px auto;
        /* 添加视距 */
        perspective: 400px;
      }
      img {
        width: 200px;
        transition: all 2s;
      }
      .box img:hover {
        transform: rotateY(45deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="./images/pk1.png" alt="" />
    </div>
  </body>
</html>

Y轴.png

  • 立体呈现
    • 使用transform-style: preserve-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>立体呈现</title>
    <style>
      body {
      }
      /* 
      perspective只是增加了近大远小的效果，并不是真正开启3d

       transform-style给谁设置？和pp一样，具有3d属性盒子的最近一级父元素
      */
      .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: skyblue;
        transition: all 2s;

        perspective: 800px;
        /* tfs */
        transform-style: preserve-3d;
      }

      .box div {
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
      }

      .back {
        background-color: green;
      }

      .front {
        background-color: orange;

        transition: 1s;
      }

      .box:hover .front {
        transform: translateZ(300px);
      }

      .box:hover {
        transform: rotateY(60deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="back">后面</div>
      <div class="front">前面</div>
    </div>
  </body>
</html>
  • 立方体
<!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;
        box-sizing: border-box;
      }

      .box {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 200px auto;

        /* 开启3d */
        transform-style: preserve-3d;

        /* 开启上帝视角 */
        transform: rotateX(-30deg) rotateY(-30deg);

        transition: 3s;
      }

      .box div {
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 300px;
        background-color: rgba(135, 207, 235, 0.5);
        border: 1px solid tomato;

        font-size: 60px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 298px;
      }

      .front {
        transform: translateZ(150px);
      }

      .back {
        transform: translateZ(-150px);
      }

      .left {
        transform: translateX(-150px) rotateY(-90deg);
      }

      .right {
        transform: translateX(150px) rotateY(90deg);
      }

      .top {
        transform: translateY(-150px) rotateX(90deg);
      }

      .bottom {
        transform: translateY(150px) rotateX(90deg);
      }

      .box:hover {
        transform: rotateX(720deg) rotateY(-380deg) rotateZ(450deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="front">前</div>
      <div class="back">后</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="top">上</div>
      <div class="bottom">下</div>
    </div>
  </body>
</html>

二、动画

1. 动画实现步骤
<!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>动画实现步骤</title>
    <style>
      /* 
      动画注意点：
       1.动画的名称不能为running，否则动画不生效；
       2.多个动画之间动画的名称不能重复;
       3.一次动画完成之后，默认会突然一下回到最初的状态
      */
      .box1 {
        width: 200px;
        height: 100px;
        background-color: skyblue;

        /* 2.调用动画 */
        animation: bigger 2s;
      }

      /*
       一. 定义动画：让宽度从200变大到600
       在定义动画的时候，如果动画的起始状态和调用这个动画的盒子本身属性值是一样的，那么from就可以省略不写 
       */
      @keyframes bigger {
        /* from {
          规定的刚开始的状态，正常书写css样式
          width: 200px;
        } */

        to {
          /* 规定最终的状态 */
          width: 600px;
        }
      }

      .box2 {
        width: 200px;
        height: 100px;
        background-color: tomato;

        /* 2.调用动画 */
        animation: move 4s;
      }

      /* 二. 定义动画：200*100 到 500*300 到 800*500 */
      /* 1.定义动画 百分比可以实现阶段性的动画 */
      @keyframes move {
        50% {
          width: 500px;
          height: 300px;
        }

        100% {
          width: 800px;
          height: 500px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <br />
    <br />
    <div class="box2"></div>
  </body>
</html>
2.animation复合属性

animation符合属性.png

<!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>animation复合属性</title>
    <style>
      .box {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /*
        2.调用动画
           延迟时间：动画开始执行之前要等待的时间 s/ms
           动画播放次数：infinite 无限次播放
           动画播放方向：alternate 交替播放
           速度曲线：默认 ease； 1. linear 匀速播放，一般用在补间动画(连续的动画播放)  2. steps(次数)一般配合精灵图使用，用在逐帧动画，一步一步的去完成的动画；
           执行完毕时的状态：forwards 动画会停在动画结束时的状态；
           注意点：
            动画名称和播放一次动画的时长必须写，其他属性需要就写
            forwards不能和infinite结合使用，否则不生效
            animation 里面属性值 不分先后顺序
            当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
            */
        animation: change 2s steps(4) alternate infinite;
      }
      /* 1.定义动画 */
      @keyframes change {
        to {
          width: 500px;
          height: 500px;
          background-color: orange;
          border-radius: 50%;
        }
      }

      /* 
      暂停动画一般配合hover使用
      谁在调用动画，就给谁设置:hover 去暂停动画
       */
      .box:hover {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

动画属性.png

3.使用steps实现逐帧动画
  • 逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
  • animation-timing-function: steps(N)；
    • 将动画过程等分成N份
4.能够使用animation属性给一个元素添加多个动画效果
  • 多组动画使用逗号隔开 多组动画.png
avatar
文章
阅读
粉丝