手把手教你打造一个“蚊香”式加载

最新推荐文章于 2024-08-18 21:06:49 发布

某个爱摸鱼的程序员

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量38

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2301_79347496/article/details/134142917

版权

前言

这次给大家带来的是一个类似蚊香加载一样的效果，这个效果还是非常具有视觉欣赏性的，相比前几篇文章的CSS特效，这一次的会比较震撼一点。

效果预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

从效果上看感觉像是一层层蚊香摞在一起，通过动画来使得它们达到3D金钟罩的效果。

HTML布局

首先我们通过15个span子元素来实现金钟罩的每一层，用于创建基本结构。从专业术语上讲，每个span元素都代表加载动画中的一个旋转的小点。通过添加多个span元素，可以创建出一串连续旋转的小点，形成一个加载动画的效果。

<div class="loader">
        <span></span>
        // 以下省略15个span元素
 </div>

CSS设计

完成了基本的结构布局，接下来就是为它设计CSS样式了。我们一步一步来分析：

首先是类名为loader的CSS类，相关代码如下。

.loader{
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(60deg);
}

我们将元素的定位方式设置为相对定位，使其相对于其正常位置进行定位。然后定义好宽度和高度之后，设置元素的变换样式为preserve-3d，这样可以元素的子元素也会受到3D变换的影响。除此之外，还需要transform属性来设置元素的变换效果。这里的perspective(500px)表示以500像素的视角来观察元素，rotateX(60deg)则表示绕X轴顺时针旋转60度。

这样就将一个宽高都定义好的元素进行了透视效果的3D旋转，使其以60度角度绕X轴旋转。

loader类可以理解为父容器，接下来就是loader类中的子元素span。

.loader span{
    position: absolute;
    display: block;
    border: 5px solid #fff;
    box-shadow: 0 5px 0 #ccc,
                inset 0 5px 0 #ccc;
    box-sizing: border-box;
    border-radius: 50%;
    animation: animate 3s ease-in-out infinite;
}

通过以上样式，我们可以创建一个圆形的动画效果，边框有阴影效果，并且以动画的方式不断旋转。关于CSS部分大部分都是一样的，这里主要介绍一下这里定义的动画效果。名称为animate，持续时间为3秒，缓动函数为ease-in-out，并且动画无限循环播放。

@keyframes animate {
    0%,100%{
        transform: translateZ(-100px);
    }
    50%{
        transform: translateZ(100px);
    }
}

这是一个关键帧动画。关键帧是指动画在不同时间点上的状态或样式。首先该动画名为animate，它包含了三个时间点的样式变化：

在0% 和100% 的时间点，元素通过transform: translateZ(-100px)样式将在Z轴上向后移动100像素，这将使元素远离视图。

在50% 的时间点，元素通过transform: translateZ(100px)样式将在Z轴上向前移动100像素。这将使元素靠近视图。

通过应用这个动画，span元素将在动画的持续时间内以一定的速率来回移动，从而产生一个视觉上的动态效果。

最后就是单独为每个子元素span赋予样式了。

.loader span:nth-child(1){
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation-delay: 1.4s;
}
.loader span:nth-child(2){
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    animation-delay: 1.3s;
}
......
以下省略到第15个span元素

第一个span元素的样式设置了top、left、bottom和right属性为0，这意味着它会填充父元素的整个空间。它还设置了animation-delay属性为1.4秒，表示在加载动画开始之后1.4秒才开始播放动画。

后面14个span元素都是按照这个道理，以此类推即可。通过给span元素的动画延迟属性的不同设置，可以实现加载动画的错落感和流畅的过渡效果。

总结

以上就是整个效果的实现过程了，通过设计的动画来实现这个蚊香式加载，整体还是比较简单的。大家可以去码上掘金看看完整代码，然后自己去尝试一下，如果有什么创新的地方或者遇到了什么问题欢迎在评论区告诉我~

某个爱摸鱼的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
手把手教你打造一个“蚊香”式加载

这次给大家带来的是一个类似蚊香加载一样的效果，这个效果还是非常具有视觉欣赏性的，相比前几篇文章的CSS特效，这一次的会比较震撼一点。以上就是整个效果的实现过程了，通过设计的动画来实现这个蚊香式加载，整体还是比较简单的。大家可以去码上掘金看看完整代码，然后自己去尝试一下，如果有什么创新的地方或者遇到了什么问题欢迎在评论区告诉我~
复制链接

扫一扫