本文共 1477 字，大约阅读时间需要 4 分钟。

前言

Hello！小伙伴！

非常感谢您阅读我的文章。如果文中有错误，欢迎随时指出～ 我是海轰，昵称：程序猿一只，标签：C++选手，学生。 从C语言起步，后来转入计算机专业，多次获奖，已保研。目前正在奋战C++和Linux领域，进展缓慢但在努力中～

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享源代码和学习资料，欢迎关注～

---

效果展示

---

Demo代码

HTML

CSS

html, body {
    margin: 0;
    height: 100%;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #263238;
}
section {
    width: 650px;
    height: 300px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid red;
}
span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 20px solid;
    border-color: rgba(255,255,255, .25) rgba(255,255,255, 0.5) rgba(255,255,255, .75) rgba(255,255,255,1);
    animation: rotation 2s linear infinite;
}
@keyframes rotation {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}

---

原理详解

步骤1

使用span标签，设置CSS样式

• 宽度、高度均为36px
• 边框：20px solid

效果图：圆形边框呈现

---

步骤2

设置span边框颜色，分别设置四个边框颜色为：

• rgba(255, 255,255, .25)
• rgba(255,255,255, 0.5)
• rgba(255,255,255, .75)
• rgba(255,255,255,1)

效果图：边框颜色渐变

---

步骤3

为span添加圆角

设置border-radius: 50%

效果图：边框圆角化

---

步骤4

为span添加旋转动画

• 顺时针旋转（0-360度）2秒无限循环

效果图：边框持续旋转

---

知识点

rgba() 函数

• 定义：使用红、绿、蓝、透明度(A)生成颜色
• 透明度范围：0~1，0无色透明，1完全不透明

---

结语

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎指正～

我是海轰（≧◡≦）如果您觉得写得可以，欢迎点赞、收藏、转发～ 写作不易，「点赞」+「收藏」+「转发」 谢谢支持～

转载地址：http://zcxuz.baihongyu.com/