css特效之动画 transform加载中

CSS中的动画 transform 使用transform的时候实际上就是对标签进行操作,旋转等等 步骤如下: 1、首先呢就是定义一个div 作为背景 2、其次就是需要旋转的标签，也可以是图片 3、就是对需要旋转的标签进行样式设置 4、最后呢加上动画效果就行了

<div class="contea">
    <div class="conters"></div>
  </div>

记下来就是CSS设置了 背景的设置

.contea{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #001d30;
  animation: changeback 1s linear infinite; /*设置颜色变换*/
}

下面的就是需要旋转的内容了

.conters{
position: absolute;
width: 150px;
height: 150px;
background: linear-gradient(to top, #001d30 40%, #51eeee); /设置渐变/
border-radius: 50%; /设置圆角/
animation: xuh 1s linear infinite; /动画添加 设置时间等/
}
.conters:before{
content: ‘’;
position: absolute;
width: 130px;
height: 130px;
bottom: 0;
background: #001d30;
border-radius: 50%;
}
.conters::after{
content: ‘’;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
top: 50px;
right: -8px;
background: #51eeee;
box-shadow: 0 0 5px #51eeee, 0 0 25px #51eeee,0 0 50px #51eeee ,0 0 75px #51eeee; /阴影偏移和颜色/
}

@keyframes xuh{ to{ transform: rotateZ(360deg); } }