css 渐变圆边旋转效果

最新推荐文章于 2023-07-07 16:05:03 发布

余九月丶

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量652

点赞数

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

本文链接：https://blog.csdn.net/sepgit/article/details/107917937

版权

css3 动画专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圆边</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0
    }

    body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box {
        width: 200px;
        height: 200px;
        font-size: 10px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .box .line {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-style: solid;
        border-color: #00BFFF transparent transparent #00BFFF;
        border-width: 2px 2px 0 0;
        animation: animate 3s linear infinite normal;
    }

    @keyframes animate {
        to {
            transform: rotate(1turn);
        }
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="line">
        </div>
    </div>
</body>
</body>

</html>

效果
在这里插入图片描述

其他
可以在box 内添加多个line 。给不同的 line 添加不同的宽高达到，多个圆环绕的效果。再给与不同的角度和方向，让渐变线达到顺时针和逆时针旋转的效果。

余九月丶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css 渐变圆边旋转效果

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圆边</title> <style type="text/css"> * { margin: 0; padding: 0 } body { margin: 0;
复制链接

扫一扫