css线绕方框动画 |div css 分页

.box{
height: 300px;
width: 300px;
position: relative;
margin: 0 auto;
background-color: #efefef;
border: 2px solid #333333;
padding: 20px;
box-sizing: border-box;
}
.circle{
height: 30px;
width: 30px;
background-color: #ff0000;
border-radius: 50%;
position: absolute;         
animation: circleMove 5s infinite      
}
@keyframes circleMove{
0%{
right: 0;
top: 0;
}
25%{
right: 0;
top: 250px;
} 
50%{
right: 250px;
top: 250px;
}
75%{
right: 250px;
top: 0;
}
100%{
right: 0;
top: 0;
}
}

首先，大家创建了一个CSS方框，命名为.box，其中包括了一些基本的属性，如高度、宽度、边框、内边距等。在这个方框中，大家还要添加一个小的圆圈，在这个圆圈上添加一个动画来实现绕着方框旋转的效果。

圆圈的样式类名是.circle，它的基本属性包括高度、宽度、背景颜色、圆角等。在此基础上，大家对圆圈的位置进行了定位，使之相对于.box进行绝对定位。此外，大家还需要添加一个循环动画，名为circleMove，它距离右边和上边的位置将在一段时间内不断地变化，使圆圈绕着方框旋转。

最后，大家在样式中定义了一个名为@keyframes的关键帧动画，它定义了小圆圈的位置变化规则。

通过这种方式，大家可以实现一个非常酷炫的CSS线绕方框动画效果。如果你希望在网页中添加一些特别的效果，不妨尝试一下这种效果吧！