移动web（2）

m0_73370458

已于 2023-05-28 10:33:08 修改

阅读量91

点赞数

分类专栏： web前端文章标签：前端 css html

于 2023-05-28 10:27:06 首次发布

本文链接：https://blog.csdn.net/m0_73370458/article/details/130826206

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

该文详细介绍了CSS3中的空间转换技术，包括位移、透视、旋转以及如何创建立体效果，特别是一个3D导航的示例。同时，文章也探讨了CSS3动画的使用步骤，包括定义@keyframes和应用动画属性，以及逐帧动画与补间动画的区别和应用。

摘要由CSDN通过智能技术生成

一、空间转换

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

1. 空间位移

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

取值（正负均可）（像素单位数值，百分比）

2. 透视

属性（添加给父级）

perspective: 值;

3. 空间旋转

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

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

4. 立体呈现

步骤：

盒子父元素添加transform-style: preserve-3d ;
设置子盒子的位置（位移或旋转）
注：转换元素都有自己独立的坐标轴，互不干扰

案例：3D导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }

        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;
            /* 使在写代码中，能看到立方体 */
            /* transform: rotateX(-20deg) rotateY(30deg); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }

        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }

        .navs li a:last-child {
            background-color: orange;
            transform: rotateX(90deg) translateZ(20px);
        }

        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>

二、动画

1.动画的使用步骤

a) 定义动画

/* 完成两个状态之间的变化 */
@keyframes 动画名称 {
    from {}

    to {}
}

/* 完成多个状态之间的变化(百分比是动画总时长的占比) */
@keyframes 动画名称 {
    0% {}

    10% {}

    15% {}

    100% {}
}

b) 使用动画

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

2.动画属性

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

注意：

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

2.1 逐帧动画与补间动画

案例：

<!DOCTYPE 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;
    }
    @keyframes move {
      form{
        background-position: 0 0;
      }
      to {
        /* 1680：精灵图的宽度 */
        background-position: -1680px 0;
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>精灵动画</title>
  <style>
    .box {
      position: absolute;
      left: 0;
      width: 140px;
      height: 140px;
      background-image: url(./images/bg.png);
      animation:
        move 1s steps(12) infinite,
        run 5s forwards;
    }

    @keyframes move {
      form {
        background-position: 0 0;
      }

      to {
        background-position: -1680px 0;
      }
    }

    @keyframes run {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(800px);
      }
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>