css吃豆人loading加载动画

最新推荐文章于 2024-05-18 15:14:09 发布

liytingtt

最新推荐文章于 2024-05-18 15:14:09 发布

阅读量67

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/li_970408/article/details/132428253

版权

效果图
在这里插入图片描述

html部分

  <div class="conter">
    <div></div>
    <div class="pont" style="--x: 0"></div>
    <div class="pont" style="--x: 1"></div>
    <div class="pont" style="--x: 2"></div>
    <div class="pont" style="--x: 3"></div>
    <div class="pont" style="--x: 4"></div>
  </div>

style部分

.conter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.conter div:first-child {
  overflow: hidden;
  position: relative;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: #a7cc39;
}

.conter div:first-child::after {
  content: '';
  border: none;
  position: absolute;
  top: 50px;
  left: 50px;
  height: 150px;
  width: 150px;
  background-color: #fff;
  z-index: 10;
  transform: rotate(-45deg) skew(0deg);
  transform-origin: 0 0;
  animation: animate 1s linear infinite;
}

@keyframes animate {
  0% {
    transform: rotate(-45deg) skew(0deg);
    transform-origin: 0 0;
  }
  50% {
    transform: rotate(0deg) skew(90deg);
    transform-origin: 0 0;
  }
  100% {
    transform: rotate(-45deg) skew(0deg);
    transform-origin: 0 0;
  }
}

.pont {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #4fc0e4;
  margin-left: 30px;
  z-index: 11;
  animation: ani 2s linear infinite;
  animation-delay: calc(var(--x) * 0.5s);
  transform: translateX(250px);
}

@keyframes ani {
  0% {
    transform: translateX(250px);
  }
  100% {
    transform: translateX(10px);
  }
}