❝
Hello！小同伴！
很是谢谢您阅读海轰的文章，倘若文中有错误的地方，接待您指出～
自我先容 ଘ(੭ˊᵕˋ)੭
昵称：海轰
标签：法式猿｜C++选手｜学生
简介：因C语言结识编程，随后转入盘算机专业，有幸拿过一些国奖、省奖...已保研。现在 正在学习C++/Linux/Python
学习履历 ：扎实基础 + 多做条记 + 多敲代码 + 多思索 + 学好英语！
初学Python 小白阶段
文章仅作为自己的学习条记 用于知识系统 建设以及温习
题不在多 学一题 懂一题
知其然 知其以是 然！
效果展示在这里插入图片形貌
Demo代码HTML
!DOCTYPE htmlhtml 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" link rel="stylesheet" href="style.css" titleDocument/title/headbody sectionspan/span/section/body/htmlCSS
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 : 96px; height: 96px; border-radius: 50%; display: inline-block; position: relative; border: 10px solid white; border-bottom-color: transparent; animation: rotation 2s linear infinite ;}span::after{ content: '' position: absolute; left: 51px; top: 79px; border: 20px solid transparent; border-right-color: white; transform: rotate(-45deg);}@keyframes rotation { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}原理详解步骤1使用span标签作为箭尾，设置为
宽度、高度均为96px边框：10px solid，其中上/左/右边框为白色 下边框为透明 width : 96px; height: 96px; border: 10px solid white; border-bottom-color: transparent;效果图如下
在这里插入图片形貌
步骤2span标签圆角化
border-radius: 50%;效果图如下
在这里插入图片形貌
步骤3使用span::after伪类元素 作为箭头
设置为
绝对定位边框：20px solid，右边框为白色，上/下/左边框为透明旋转-45度 position: absolute; /* left: 51px; top: 79px; */ border: 20px solid transparent; border-right-color: white; transform: rotate(-45deg);效果图如下
图片红色部门即为span::after
步骤4设置span::after的位置
注：
这里移动位置时间 就需要一点点移动了确保箭头和箭尾可以很好的重合这里一定 是可以用数学公式盘算出来的，这里稍微需要点时间，之后有空再更新更为一样平常 情形 时需要移动的距离公式吧/*这里箭头需要移动的距离*/ left: 51px; top: 79px;效果图如下
步骤5为span添加动画
顺时针旋转（0-360度） 2s 无限循环 animation: rotation 2s linear infinite ;/*动画实现*/@keyframes rotation { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) }}结语文章仅作为学习条记，纪录从0到1的一个历程
希望对您有所资助，若有 错误接待小同伴指正～
我是 海轰ଘ(੭ˊᵕˋ)੭
若是 您以为 写得可以的话，请点个赞吧
谢谢支持 ❤️