CSS实现Windows10 loading加载之-线性加载

最新推荐文章于 2024-07-22 17:39:49 发布

桃子&果然

最新推荐文章于 2024-07-22 17:39:49 发布

阅读量362

点赞数

分类专栏： CSS loading 加载动画文章标签： css 前端动画 css3

本文链接：https://blog.csdn.net/sinat_31420295/article/details/132130819

版权

CSS loading 加载动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用CSS动画来实现win10 loading加载的效果

前言

使用Windows电脑的同学，在电脑开机关机的时候包括打开一些应用的时候，都能看到一些加动画。虽然没有多么炫酷，但也几个小点还是感觉蛮好玩的，所以就想着能否来自己实现一下。也就有了这一篇文章，记录一下所踩的坑。

效果图

先来看一下效果图（录制的FPS比较低，会有卡顿的感觉）
加载动画效果图

我与春风皆过客，你携秋水揽星河。愿有岁月可回首，且以深情共白头！

代码实现

CSS动画就是在一定的时间内，执行一系列的样式变换。所以看到的动画，无论多么复杂都是各种属性在一定时间内的各种变化的复合，重要的是我们要找到其中的规律。

线性加载动画

先来看第一个动画，这个看起来像是一个弹簧的效果。我们来分析一下：

从整体来看，是快速进入然后中间缓慢，后面快速退出（所以 animation-timing-function 就有了）
一共有五个点，所以需要的DOM元素个数为5
再分别看每个DOM元素的运动轨迹，发现其实运动的轨迹是一样的，所以我们只要实现一个元素的动画效果，其他的一样就可以

经过上面的分析，接下来就开始搞。

DOM元素

先来做一个小圆点的动画，所以只留下一个

<!-- 条形加载动画 -->
<div class="container">
    <h2 style="text-align: center;">线性加载动画</h2>
    <span></span>
	<!-- <span></span>
    <span></span>
    <span></span>
    <span></span> -->
</div>

CSS

先来把container的整体来做一下，并且把小圆点做出来

.container {
   border-bottom: 1px solid #333;
   width: 90%;
   margin: 0 auto;
}

.container span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: skyblue;
    border-radius: 50%;
}

这个时候发现小圆点已经就位了，蓄势待发
在这里插入图片描述
接下来我们希望小圆点移动起来，怎么办呢？让DOM 元素移动，我们可以使用定位 或者 transform。但是transform移动的距离需要我们来计算，如果使用百分比，那么移动的距离是相对于自身的宽度或者高度来计算的，也不是我们想要的。所以这里我用的是定位

注意：
相对定位、绝对定位或者是 fixed定位 都可以，但是要自己找好参照系（子绝父相），我这里用的相对定位

一旦喜欢上谁就别无所求，只要每天能见到他就已经觉得很庆幸，一辈子很短，如白驹过隙，转瞬即逝。可这种心情很长，如高山大川，绵延不绝。 ——《武林外传》

动起来

@keyframes move {
    0% {
        left: -10%;
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 90%;
        opacity: 0;
    }
}

.container span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: skyblue;
    border-radius: 50%;
    /* 让圆点动起来 */
    animation: move 5s cubic-bezier(0.03, 0.615, 0.995, 0.415) infinite;
    position: relative;
}

请添加图片描述
可以看到已经动起来了。不过只有一个点。那么剩下的就是让其他圆点跟着一起动就好了。后面的每一个点增加一个延迟时间animation-delay即可。

.container span:nth-child(5) {
    animation-delay: 0.1s;
}

.container span:nth-child(4) {
    animation-delay: 0.2s;
}

.container span:nth-child(3) {
    animation-delay: 0.3s;
}

.container span:nth-child(2) {
    animation-delay: 0.4s;
}

.container span:nth-child(1) {
    animation-delay: 0.5s;
}

说我爱你三个字要多久啊？我算了一算，大概也就三秒吧，但是我想用一辈子去证明

所遇问题

上面动画看起来简单，但我也是尝试了好久才尝试出来。不得不说是有点愚笨。这里记录一下研究过程中遇到的一点问题：

浏览器疯狂弹出滚动条问题

这个问题是: 在小圆点移动到最后的时候，浏览器疯狂弹出横向滚动条。因为圆点的移动，实际上是已经超过了浏览器的可视窗口了，所以就出现了滚动条。看看效果：
请添加图片描述

100% {
 	left: 90%;
    opacity: 0;
}

可以看到我上面动画中的代码，我在百分百的时候，指定的left: 90%; 就是为了规避这个问题的。

原因

我的小圆点使用的是相对定位
因为是相对定位，所以5个小圆点是并排的。导致最右边的小圆点移动100%，必然会超过屏幕之外。
.container 的宽度太宽了，占了总宽度的90%，剩下的10%不足以容纳5个并排的小圆点

解决方法

找到问题之后，解决就很好解决了（下面的方案为或的关系）

缩小移动的距离，也就是我上面的代码，left:90%; 让小圆点少运动一点
缩小.container的宽度，让剩下的空间足够容纳所有的小圆点
让小圆点从相对定位改为绝对定位或者fixed定位，这样的话小圆点会脱离文档流，全部都堆在一起。（但是要找好参照系，比如我只想让它在.container的范围内运动，那么我要给.container加上 position: relative;而 fixed是相对浏览器窗口的）然后移动的距离就可以是left:100%了
将溢出的元素隐藏, 因为问题是元素超过了可视窗口导致，所以我们可以把超出的部分隐藏，那么就需要在.container 里面加上overflow: hidden;也是可以继续使用 left:100%的

你知道什么东西最灿烂吗？是你的笑容

小球回弹问题

遇到的另外一个问题是小球们在运动过去之后，会弹回到起点。（这个问题应该是我的无知导致），为了知道每个点都是谁，我加上了标记，看一下效果图：
请添加图片描述
可以看到，小球们在抵达对岸以后又顺势回来了，虽然不懂为什么，但是误打误撞的发现了一个新的加载动画，好像看起来也不错🤣。

造成现在这种情况的代码如下：

.container span {
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: skyblue;
   border-radius: 50%;
   animation: move 5s cubic-bezier(0.03, 0.615, 0.995, 0.415) infinite;
   position: relative;
   /* 这里多加了一个属性，指定left 为0 */
   left: 0%;
}

@keyframes move {
    0% {
        left: -10%;
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    /* 100% {
        left: 90%;
        opacity: 0;
    } */
    /* 把之前的百分百调整为了 60%也就是60%以后就不再指定轨迹了 */
    60% {
        left: 90%;
        opacity: 0;
    }
}

原因

由于不太好描述所以也没查到有效的答案分析，我猜测是如下原因：

当我们给动画指定运动轨迹的时候，如果不指定到100%的情况，那么剩余的时间，他就会自动的以同样的运动曲线返回到最初始的状态。
我在最初始的状态上加了left: 0%;

所以是这两个条件附加到了一起，导致小球回去了。假如 span标签并不加left: 0%; 我们看一下效果
请添加图片描述

解决办法（方案为或的关系）

将动画的运动轨迹指定到结束100%。（既然问题是因为没有指定到100%才会回去，所以我的代码是指定到了100%）
轨迹依然不指定100%，但是初始状态.container span增加一个属性：opacity: 0; 也就是初始状态是看不见的。这样的话，后半段的动画就是看不见的状态了。来看效果图：
所以.container span 如果增加了opacity: 0; 那么不管.container span是加上了left: 0%; 导致回弹，还是.container span 不加left: 0%; 导致堆叠在最后都不影响，因为用户已经看不见了。

总结

虽然看起来这个动画还是蛮简单的，不过纸上得来终觉浅，觉知此事要躬行。自己动手写起来的时候还是能遇到很多问题的，但问题即是成长的台阶。简简单单的动画写出来也是要所学知识的融会贯通的。希望这篇文章在轻松之中，也能让你有所收获。

心里泛起的火花，始终没有一个说法，梦里一直有一幅画，里面不但有你的微笑，还有被海风吹起的头发

未完成

没想到这个第一个动画写起来我墨迹了这么多，篇幅太长。下一个转圈的动画在下一篇文章补上。（悄悄告诉你，文章还没写。写完了我会补充到这里的😁）

附上完整代码

<!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>
        html,
        body {
            padding: 0%;
            margin: 0%;
        }
        .container {
            border-bottom: 1px solid #333;
            width: 90%;
            margin: 0 auto;
            position: relative;
            /* overflow: hidden; */
        }
        .container span {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: skyblue;
            border-radius: 50%;
            animation: move 4s cubic-bezier(0.03, 0.615, 0.995, 0.415) infinite;
            /* position: absolute; */
            position: relative;
            /* left: -0%;
            opacity: 0; */
        }
        .container span:nth-child(5) {
            animation-delay: 0.1s;
        }
        .container span:nth-child(4) {
            animation-delay: 0.2s;
        }
        .container span:nth-child(3) {
            animation-delay: 0.3s;
        }
        .container span:nth-child(2) {
            animation-delay: 0.4s;
        }
        .container span:nth-child(1) {
            animation-delay: 0.5s;
        }
        @keyframes move {
            0% {
                left: -10%;
                opacity: 0.2;
            }

            50% {
                opacity: 1;
            }

            100% {
                left: 90%;
                opacity: 0;
            }
            /* 60% {
                left: 90%;
                opacity: 0;
            } */
        }
    </style>
</head>

<body>
    <!-- 条形加载动画 -->
    <div id="preload" class="container">
        <h2 style="text-align: center;">线性加载动画</h2>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>
</html>