Web前端系列技术之CSS进阶（从基础开始）②【终章】

本文链接：https://blog.csdn.net/IAMLSD550/article/details/126279055

CSS进阶效果实现二

在CSS进阶学习中，第一节 主要介绍了 字体图标使用、平面转换 以及渐变，但是从市面上来看，现在很多技术不仅仅是维持在 2D 平面上了；相反，更多美观的界面都加入了 3D 的元素成份；

那么 3D 样式又该如何实现呢？同时又该如何让美观的界面穿插动态特效呢？

今天介绍的主要内容就是：
四、空间转换
五、动画

文章目录

CSS进阶效果实现二
四、空间转换
五、动画
六、无缝走马灯案例
总结

四、空间转换

空间转换：也称 “ 3D转换 ” ，就是实现元素在空间内的位移、旋转、缩放等效果，这里就需要用到使用transform属性；

空间： 是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线（用户观察电脑的方向）方向相同，与平面区别如下：
在这里插入图片描述

注意：Z轴的正值方向指向用户自己

1. 空间位移

语法：

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

取值（正负均可）：

像素单位数值；
百分比；

样例代码块：

/* 空间位移 */
transform: translate3d(50px, 100px, 200px);

/* 平面位移 */
transform: translate(50px, 100px);

效果实现对比：
在这里插入图片描述

注意：如果只写transform: translateZ(值)是无法看出具体效果的，这里就需要用到 透视属性 ——perspective；

2. 透视

原理：是把人眼和屏幕添加一个视距，产生一种近大远小，近实远虚的效果；

视距： 也称为透视距离，所谓的视距就是人的眼睛到屏幕的距离；
在这里插入图片描述

属性（添加给父级）：

perspective: 值；
取值：像素单位数值，数值一般在800 – 1200（此数值范围最贴切人类视觉观察效果）；

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

再次将上述案例的第一个蓝色盒子的父级添加上一个perspective属性，效果实现对比：如下：
在这里插入图片描述

3. 空间旋转

语法：

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

左手法则：
判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向；
在这里插入图片描述
样例代码块：

/* 空间旋转 */
transform: rotateZ(360deg);

/* 平面旋转 */
transform: rotate(360deg);

效果实现对比：
在这里插入图片描述
注意：空间rotateZ旋转和平面rotate旋转效果是一样的，原因是rotateZ就是绕着Z轴转动，而Z轴就是垂直与屏幕的视线轴，所以说旋转效果一样；

拓展（了解）：rotate3d（x, y, z, 角度度数）用来设置自定义旋转轴的位置及旋转的角度（其中x，y，z 取值为0-1之间的数字）；

4. 立体呈现

语法：

transform-style: preserve-3d

实现方法：

添加 transform-style: preserve-3d；
使子元素处于真正的3d空间；

具体步骤：

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

注意：
① 空间内，转换元素都有自已独立的坐标轴，互不干扰，所以需要用定位确定相对位置；
② 不能使用perspective来实现立体效果，因为它只增加近大远小、近实远虚的视觉效果；

【样式案例图】
在这里插入图片描述
【实现解析代码】

<!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 type="text/css">
        html {
            /* 为了给.ball-box布局 */
            height: 100%;
        }
        body {
            position: relative;
            height: 100%;
            background-color: #fff;
        }
        .ball-box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            /* 实现3d空间 */
            transform-style: preserve-3d;
        }
        .ball {
            height: 100%;
            /* 实现3d空间 */
            transform-style: preserve-3d;
            /* 动画引入 */
            animation: rotate3d1 5s linear infinite;
        }

        .ball>div {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid #c02c38;
            border-radius: 50%;
            background: url("images/logo.jpg");
            background-size: 100% 100%;
            overflow: hidden;
        }
        /* 五根边框线位于空间Y轴不同的角度 */
        .ball .line1 {
            transform: rotateY(0deg);
        }
        .ball .line2 {
            transform: rotateY(36deg);
        }
        .ball .line3 {
            transform: rotateY(72deg);
        }
        .ball .line4 {
            transform: rotateY(108deg);
        }
        .ball .line1 {
            transform: rotateY(144deg);
        }
        .line {
            position: absolute;
            top: -180px;
            left: 50%;
            transform: translate(-50%, 50%);
            transform-style: preserve-3d;
            width: 2px;
            height: 360px;
            background-color: #c02c38;
        }
        .bg1 {
            position: absolute;
            top: 10px;
            left: -50px;
            width: 100px;
            height: 300px;
            background-color: #c02c38;
            border: 2px solid #36292f;
            border-radius: 50px;
            text-align: right;
            font-size: 35px;
            letter-spacing: 33px;
            line-height: 60px;
        }
        .bg2 {
            position: absolute;
            top: 10px;
            left: -50px;
            width: 100px;
            height: 300px;
            background-color: #c02c38;
            border: 2px solid #36292f;
            border-radius: 50px;
            text-align: right;
            font-size: 35px;
            letter-spacing: 33px;
            line-height: 60px;
            transform: rotateY(90deg);
        }
        .bg {
            transform-style: preserve-3d;
            animation: rotate3d2 5s linear infinite;
        }
        .shadow {
            position: absolute;
            top: 63px;
            left: 27px;
            width: 50px;
            height: 108px;
            background: radial-gradient(circle at 50% 50%, rgba(114, 5, 5, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 15%);
            transform: rotateX(80deg);
        }
        @keyframes rotate3d1 {
            to {
                transform: rotateX(0deg) rotateZ(0deg) rotateY(360deg);
            }
        }
        @keyframes rotate3d2 {
            to {
                transform: rotateY(-360deg);
            }
        }
        @keyframes rotate3d3 {
            to {
                transform: rotateY(-360deg);
            }
        }
    </style>
</head>
<body>
    <!-- 风铃线 -->
    <div class="line">
        <!-- 风铃带 -->
        <div class="bg">
            <!-- 空间沿X轴、Y轴着平面 -->
            <div class="bg1">小柴爱程序</div>
            <!-- 空间沿Y轴、Z轴着平面 -->
            <div class="bg2">小柴爱程序</div>
        </div>
    </div>
    <!-- 装铃的盒子 -->
    <div class="ball-box">
        <div class="ball">
            <!-- 风铃制作，利用五根边框线组成一个球 -->
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="line4"></div>
            <div class="line5"></div>
        </div>
        <!-- 阴影制作 -->
        <div class="shadow"></div>
    </div>
</body>
</html>

5. 空间缩放

语法：

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

其实，在很多项目中，空间缩放一般都不常用，所以也就了解一下！！！

五、动画

在学习动画之前，最应该了解到的就是过渡，因为其是和实现动画效果最为接近的一个属性，但是它们终究有很大区别；

过渡同时是实现2个状态间的变化过程；

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

1. 动画属性

属性：animation

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

实现步骤：

定义动画

/* 方法一 */
@keyframes 动画名称 {
  from { }
  to { } 
}

/* 方法二 */
@keyframes 动画名称 {
  0% { }
  50% { } 
  100% { } 
}

使用动画

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

其中：

速度曲线分为：linear（匀速）、steps[n]（分步动画-n等分）；

无限循环为：infinite；

反方向为：alternate；

在这里插入图片描述

注意：

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

2. 动画分类

前端动画往往分为两类：补间动画 和 逐帧动画；

如图所示：
在这里插入图片描述

2.1 补间动画

是动画中最长用到动画效果，默认的动画效果基本上都是补间动画；

适合项目中大部分连续动画的元素；

2.2 逐帧动画

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

代码段：

animation-timing-function: steps(N)；

原理：将动画过程等分成N份；

2.3 精灵动画制作

准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图；
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）；
使用动画（单组动画）
添加速度曲线steps(N)，N与精灵图上小图个数相同；
添加无限重复效果；

2.4 多组动画

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

基础代码段：

animation: 
         动画1, 
         动画2‘
         动画N;

人物奔跑逐帧图：
在这里插入图片描述
案例源代码段：

<!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: run 1s steps(12) infinite, 
      translate 2s linear forwards;
    }
    @keyframes run {
      100% {
        background-position: -1680px 0;
      }
    }
    @keyframes translate {
      100% {
        left: 600px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

实现效果：
在这里插入图片描述

六、无缝走马灯案例

无缝动画的唯一要求就是：不能在显示区域里面镂空；

解决无缝的方法：
复制并添加显示区域可以承接的前几张图片，确保当显示区域移动到最后几张图的时候，显示区域不会出现留白现象，从而达到无缝衔接；

代码样例：

<li style="background-color: rgb(255, 142, 142);"></li>
<li style="background-color: rgb(255, 232, 142);"></li>
<li style="background-color: rgb(183, 255, 142);"></li>
<li style="background-color: rgb(142, 255, 215);"></li>
<li style="background-color: rgb(142, 183, 255);"></li>
<li style="background-color: rgb(202, 142, 255);"></li>
<li style="background-color: rgb(252, 87, 87);"></li>

<!-- 第567移动的时候,显示区域不能留白 -->
<li style="background-color: rgb(255, 142, 142);"></li>
<li style="background-color: rgb(255, 232, 142);"></li>
<li style="background-color: rgb(183, 255, 142);"></li>