CSS中圆周特效代码 |给图片添加水印css

.circle {
position: relative;
width: 200px;
height: 200px;
/*圆周半径*/
border-radius: 50%;
box-shadow: inset 0 0 0 2px #fff,
/*可以根据需要调整圆周边框颜色和宽度*/
0 0 20px rgba(0, 0, 0, .4);
animation: spin 2s linear infinite;
/*圆周旋转的动画效果，2s为旋转一周的时间*/
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*@keyframes定义了一个圆周旋转的动画轨迹*/

以上代码中，大家首先定义了一个圆形的div（class=”circle”），圆形大小可以根据需要调整。然后大家使用圆角边框来将该div变成一个圆。接下来，使用box-shadow属性可以给圆形添加一个白色的边框和阴影，这个阴影可以使得圆周更加立体化。

最后，使用@keyframes定义了一个spin动画，通过旋转达到圆周动画效果。其中，0%代表动画开始旋转角度为0°，100%代表动画旋转到360°改变结束。这样就完成了圆周动画效果的实现。