<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
200px;
height: 200px;
/*盒子的边框 宽度 颜色 transparent表示透明 */
border: 10px solid transparent;
/*使盒子成为圆的*/
border-radius: 50%;
/*盒子的左边框颜色*/
border-top-color:red;
/*盒子的左边框宽度*/
border-left-0px;
position: relative;
animation: move 2s infinite linear;
}
.box::before{
content: "";
20px;
height: 20px;
background-color: red;
border-radius:50% ;
/*绝对定位*/
position: absolute;
right: 14px;
top: 16px;
}
/*
伪元素和伪类
after before
hover active
CSS3中提出伪类
：：后面跟的是伪元素（可以视为虚拟元素，可以用真实元素模拟）
：后面跟的是伪类
状态伪类：hover active（用户触发某个状态时会选中选择器）
伪类选择器：first-child,last-child,nth-child(n)·····用来过滤
*
*/
@keyframes move{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>