CSS 实现加载动画（最简单实现）

最新推荐文章于 2024-04-22 16:58:34 发布

优价实习

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量2.1k

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_44828588/article/details/122727611

版权

一.源码

<!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>
</head>
<style>
               .rotate-animation {
                              width: 100px;
                              height: 100px;
                              border: 16px solid #f3f3;
                              border-top: 16px solid #f33;
                              border-radius: 50%;
                              animation: rotate 1s ease-in infinite;
               }

               .rotate-animation.fill-color {
                              margin-left: 20px;
                              border-color: #2842d8 #d1b516 #cf4928 #27c965;
               }

               @keyframes rotate {
                              0% {
                                             transform: rotate(0deg);
                              }

                              100% {
                                             transform: rotate(360deg);
                              }
               }
</style>

<body>
               <div class="rotate-animation"></div>
               <div class="rotate-animation fill-color"></div>
</body>

</html>

二、实现：

css的border属性和border-radius属性

笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图:

利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果:

以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实现饼图用css就够用了. 代码如下:

.rotate-animate {
    border:100px solid #f3f3f3;
    border-radius:50%;
    border-top:100px solid #2842d8;
}

如果你想实现不同比例的饼图, 其实只要合理计算好border-width即可, 有了以上知识, 我们结合animation动画是不是可以实现下面的加载动画了?

css代码如下:

.rotate-animate {
    border:100px solid #f3f3f3;
    border-radius:50%;
    border-top:100px solid #2842d8;
    animation:rotate 2s linear infinite;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}

我们在做css3动画时经常会用到transform 和 animation, 所以建议大家把这两个属性掌握.

补充:如果要实现扇形, 是不是也很简单了?

实现更优雅的圆环加载动画

有了以上的css知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border来做圆形和饼图, 如果我们设置一个元素的宽度width和高度height, 并且背景透明(transparent), 会怎么样呢, 我们来看看:

代码如下:

.rotate-animate {
    border:16px solid #f3f3f3;
    border-radius:50%;
    border-top:16px solid #2842d8;
    width:100px;
    height:100px;
}

那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:

圆环加载动画的整代码如下:

<style>
    .rotate-animate {
        border:16px solid #f3f3f3;
        border-radius:50%;
        border-top:16px solid #2842d8;
        width:100px;
        height:100px;
        animation:rotate 2s linear infinite;
    }
    .rotate-animate.fill-color {
        margin-left: 20px;
        border-color: #2842d8 #d1b516 #cf4928 #27c965;
    }
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform:rotate(360deg);
        }
    }
</style>
<!-- html -->
<div class="rotate-animate"></div>
<div class="rotate-animate fill-color"></div>