CSS --- 空间转换、动画

最新推荐文章于 2024-10-06 23:37:55 发布

虾小眠0526

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量93

点赞数

分类专栏：前端学习之旅文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_58470558/article/details/129589490

版权

前端学习之旅专栏收录该内容

60 篇文章 2 订阅

订阅专栏

1. 空间转换（3D转换）

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

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

属性: transform

1.1 空间位移

语法：
transform: translate3d(x, y, z)；
transform: translateX(值)；
transform: translateY(值)；
transform: translateZ(值)；
取值(正负均可)：像素单位数值 / 百分比

<!DOCTYPE html>
<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>

1.2 透视

目标：使用perspective属性实现透视效果
思考：1.生活中，同一个物体，观察距离不同，视觉上近大远小、近清楚远模糊
2.默认情况下，Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果
属性( 添加给父级 ）：perspective: 值；
取值: 像素单位数值，数值一般在800 - 1200

<!DOCTYPE html>
<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>

1.3 空间旋转

目标：使用rotate实现元素空间旋转效果
语法：transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

左手法则：判断旋转方向–左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向

<!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>

1.4 立体呈现

目标：使用transform-style: preserve-3d呈现立体图形
实现方法：添加 **transform-style: preserve-3d;**使子元素处于真正的3d空间；默认值flat,表示子元素处于2D平面内呈现

<!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>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all 2s;
            transform-style: preserve-3d;
        }

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

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>

1.5 缩放

目标：使用scale实现空间缩放效果
语法：
transform: scaleX(倍数)；
transform: scaleY(倍数)；
transform: scaleZ(倍数)；
transform: scale3d(x y, z);

2. 动画

目标：使用animation添加动画效果
过渡可以实现两个状态间的变化效果
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，构成动画的最小单元：帧或动画帧

实现步骤：
1）定义动画
法1：@keyframes 动画名称 { from {} to{} }
法2：@keyframes 动画名称 { @keyframes 动画名称 { 0%{} 10%{} 15%{} 100%{} }
2）使用动画：animation：动画名称动画花费时长；

例子：

<!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>
        .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>

动画属性：

目标：使用animation相关属性控制动画执行过程

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数（infinite循环） 动画方向（alternate） 执行完毕时状态（backwards：默认值, 动画停留在最初的状态  forwards：动画停留在结束状态）;
注意：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

例子：

<!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: 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>

拆分写法

background复合属性：color image repeat attachment position;
background-color
background-image
background-repeat
background-attachment
background-position
animation-name - 动画名称
animation-duration - 动画时长
animation-delay - 延迟时间
animation-fill-mode - 动画执行完毕时的状态
animation-timing-function - 速度曲线：使用steps（数字）实现逐帧动画
animation-iteration-count - 重复次数
animation-direction - 动画执行方向
animation-play-state - 暂停动画：paused为暂停，通常配合:hover使用
逐帧动画：配合精灵图使用
补间动画：顺滑
使用steps实现逐动画：
精灵动画制作步骤：
1.准备显示区城：设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2.定义动画：改变背景图的位置（移动的距离就是精灵图的宽度)
3.使用动画：添加速度曲线steps(N)，N与精灵图上小图个数相同；添加无限重复效果

例子：使用animation属性给一个元素添加多个动画效果

<!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,
        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>