[100天挑战100个前端效果]第十一天---windows加载动画(有一种回到小时候打qq堂的时候)-CSDN博客

本文链接：https://blog.csdn.net/qq_42136832/article/details/115317564

这篇博客展示了如何使用HTML和CSS创建一个Windows风格的加载动画。通过设置元素样式和动画关键帧，实现了小球的旋转和淡入淡出效果，营造出加载过程的感觉。文章还总结了calc()函数的作用，并详细解释了设计思路和步骤。

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

windows加载动画

我们先来看看实现效果
- html代码
- css代码
今日份知识总结

我们先来看看实现效果

在这里插入图片描述

html代码

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="loader">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <p>Windows正在加载...</p>
    </div>
</body>
</html>

css代码

:root{
    --background-color: rgb(46, 48, 51);
}
*{
    margin: 0;
    padding: 0;
}
html{
    font-size: 14px;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
    width: 500px;
    height: 500px;
    /* background-color:aquamarine; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #FFF;
    font-size: 18px;
}
.loader{
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    /* background-color: violet; */
}
.loader span{
    position: absolute;
    width: 100px;
    height: 100px;
    animation: animate 3.5s linear infinite;
}
.loader span::before{
    position: absolute;
    content: "";
    background-color: #fff;
    width: 10px;
    height: 10px;
    bottom: 0;
    left: calc(50% - 5px);
    border-radius: 50%;
}
.loader span:nth-child(1){animation-delay: 0.1s;}
.loader span:nth-child(2){animation-delay: 0.2s;}
.loader span:nth-child(3){animation-delay: 0.3s;}
.loader span:nth-child(4){animation-delay: 0.4s;}
.loader span:nth-child(5){animation-delay: 0.5s;}
@keyframes animate{
    70%{
        transform: rotate(600deg);
        opacity: 1;
    }
    79%{
        transform: rotate(720deg);
    }
    80%{
        transform: rotate(720deg);
        opacity: 0;
    }
    100%{
        transform: rotate(810deg);
        opacity: 0;
    }
}

今日份知识总结

标签	作用
calc()	calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

说一下设计思路：
一个大的container，里面有loader(好多点点)，和一句话(p，这个没什么好说的)
关键是那个转圈的点点怎么实现：

1.span是空的，我门写一个before，指定width和height，它就变成正方形小块了，通过border-radius将它变成圆形。

2.然后将小球移动到的中间下面的位置，我们写一个小球旋转的动画，必定内切，不用我多解释了把！

3.然后写一个小球的延时，就会有多个小球依次旋转了

4.然后我们通过opacity控制小球的消失，就完成了windows加载动画的效果了！