纯CSS实现加载动画

最新推荐文章于 2024-08-20 02:18:10 发布

EricJeffrey

最新推荐文章于 2024-08-20 02:18:10 发布

阅读量994

点赞数

分类专栏： HTMl-CSS-JS

本文链接：https://blog.csdn.net/q15037911903/article/details/104150944

版权

HTMl-CSS-JS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

先上效果图

效果图

通过一个父div和两个子div即可实现，主要考虑三点

两个子div重叠在一起

设置父元素position: relative，然后设置子元素position: absolute就可以使子元素的div重合，然后配合left: calc(20% - 3px)使两个子元素的div居中
子div的border的设置

使用border-radius: 50%使之成为圆形，然后使用border-top-color: transparent造成一个缺口
设置两个子div的动画或者父div的动画

通过CSS的动画属性设置即可，可以使用贝塞尔曲线设置两个不同的animation-timing-function，当然只设置父元素的动画也是可以的

代码如下所示:

<!DOCTYPE html>
<head>
    <style>
        @keyframes anim {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .loadingBox {
            width: 80px;
            height: 80px;
            padding: 0px;
            left: calc(50% - 80px);
            top: calc(50% - 80px);
            position: absolute;
        }
        .outerBox {
            left: calc(10% - 3px);
            top: calc(10% - 3px);
            width: 80%;
            height: 80%;
            position: absolute;
            border-radius: 50%;
            border: medium cornflowerblue solid;
            border-right-color: transparent;
            animation: anim 847ms cubic-bezier(.42, .61, .58, .41) infinite;
        }
        .innerBox {
            left: calc(20% - 3px);
            top: calc(20% - 3px);
            width: 60%;
            height: 60%;
            position: absolute;
            border-radius: 50%;
            border: 3px cornflowerblue solid;
            border-top-color: transparent;
            animation: anim 971ms cubic-bezier(.42, .61, .58, .41) infinite;
        }
    </style>
</head>
<body style="padding: 20px;background-color: whitesmoke;">
    <div class="loadingBox" id="box">
        <div class="innerBox"></div>
        <div class="outerBox"></div>
    </div>
</body>

</html>