欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 类似于360安全体检的动画

程序员文章站 2022-06-16 10:21:44
体检中..
...
<div class="containertj">
    <div class="status-circle status-1">
      <div class="circle rotary-circle"></div>
      <div class="circle content-circle">
        <div class="circle detail-circle">体检中..</div>
      </div>
    </div>
  </div>





.containertj {
  width: 126px;
  height: 126px;
}

@keyframes rotary {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.status-circle {
  position: relative;
  height: 100%;
}

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
}

.rotary-circle {
  height: 100%;
  box-sizing: border-box;
  animation: rotary 2s infinite;
  -webkit-animation: rotary 2s infinite;
}

.content-circle {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 98%;
  background: #fff;
}

.detail-circle {
  width: 90%;
  height: 90%;
  color: #fff;
}

.status-1 .detail-circle {
  background: rgb(68, 218, 111);
}

.status-1 .rotary-circle {
  background: -webkit-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: -o-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: -ms-linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
  background: linear-gradient(
    left,
    rgba(68, 218, 111, 1),
    rgba(68, 218, 111, 0) 50%,
    rgba(68, 218, 111, 1)
  );
}

本文地址:https://blog.csdn.net/qq_32184753/article/details/107637224