div+css实现圆形loading动画，渐变拖尾动画

最新推荐文章于 2024-07-24 10:22:02 发布

专业前端小白

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量2.1k

点赞数

分类专栏： css3 文章标签： css3 loading动画 loading拖尾动画

本文链接：https://blog.csdn.net/qq_41756580/article/details/114142737

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先来上个效果图：

思路：

使用渐变背景色来实现渐变拖尾，再使用两个圆形div来实现圆弧，拖尾最前端的圆形是用的一个圆形定位到固定位置实现的。

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border渐变</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .container{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .loading{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            padding: 10px;
        }
        .loading .loading-content{
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            position: relative;
            z-index: 9;
            border-radius: 50%;
        }
        .loading .loading-border{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            border: 10px solid #f0f1f6;
            border-radius: 50%;
        }
        .loading .loading-mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            animation: rotateAnimate 2s linear infinite;
            -moz-animation: rotateAnimate 2s linear infinite;	/* Firefox */
            -webkit-animation: rotateAnimate 2s linear infinite;	/* Safari 和 Chrome */
            -o-animation: rotateAnimate 2s linear infinite;	/* Opera */
        }
        .loading .loading-mask::before{
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: calc(50% - 5px);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #6c8de5;
        }
        .loading .loading-mask::after{
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 50%;
            height: 60%;
            background-image: linear-gradient(45deg, #6c8de5, #f0f1f6);
        }
        @keyframes rotateAnimate
        {
            from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}
            to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}
        }

        @-moz-keyframes rotateAnimate /* Firefox */
        {
            from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}
            to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotateAnimate /* Safari 和 Chrome */
        {
            from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}
            to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}
        }

        @-o-keyframes rotateAnimate /* Opera */
        {
            from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}
            to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="loading">
            <div class="loading-mask"></div>
            <div class="loading-border"></div>
            <div class="loading-content"></div>
        </div>
    </div>
</body>
</html>

专业前端小白

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
div+css实现圆形loading动画，渐变拖尾动画

先来上个效果图：思路：使用渐变背景色来实现渐变拖尾，再使用两个圆形div来实现圆弧，拖尾最前端的圆形是用的一个圆形定位到固定位置实现的。全部代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0".
复制链接

扫一扫