您的位置:首页 > Web前端 > > 正文

css制作旋转小球(css实现毛毛虫爬行动作)

更多 时间:2022-01-28 01:09:27 类别:Web前端 浏览量:2438

css制作旋转小球

css实现毛毛虫爬行动作

毛毛虫儿时大家都有见过,今天想起来写一个爬行的动作,具体代码如下所示:

css制作旋转小球(css实现毛毛虫爬行动作)

html代码:

  • <li class='container'>
      <li class='hide left'></li>
      <li class='hide right'></li>
      <li class='hide bottom'></li>
      <li class='circle-container'>
        <li class='circle'></li>
      </li>
    </li>
    
  • css代码:

  •  <style>
    body {
      background-color: #1B6CB2;
      margin: 0;
    }
    .container {
      position: absolute;
      width: 600px;
      height: 400px;
      overflow: hidden;
      top: 50%;
      left: 60%;
      transform: translate(-50%, -50%);
    }
    .hide {
      height: 100%;
      width: 150px;
      background: #1B6CB2;
      position: absolute;
      z-index: 2;
    }
    .hide.left {
      left: 0;
    }
    .hide.right {
      right: 0;
    }
    .hide.bottom {
      bottom: 0;
      width: 100%;
      height: 50%;
    }
    .circle {
      position: absolute;
      height: 75px;
      width: 150px;
      border: 3px solid white;
      border-radius: 50%/100% 100% 0 0;
      border-bottom: none;
      top: 40%;
      left: 50%;
      transform-origin: 0% 50%;
      transform: translate(-50%, -50%);
      animation: magic 1.8s ease infinite;
    }
    @keyframes magic {
      0% {
        transform: rotate(-170deg) translate(-50%, -50%);
      }
      50% {
        transform: rotate(0deg) translate(-50%, -50%);
      }
      100% {
        transform: rotate(180deg) translate(-50%, -50%);
      }
    }
    .circle-container {
      position: absolute;
      height: 75px;
      width: 150px;
      top: 40%;
      left: 50%;
      transform-origin: 0% 50%;
      transform: translate(-50%, -50%);
      animation: power 1.8s ease-out infinite;
    }
    @keyframes power {
      0% {
        margin-left: 20px;
      }
      50% {
        margin-left: -55px;
      }
      99.9% {
        margin-left: -130px;
      }
      100% {
        margin-left: 20px;
      }
    }
      </style>
    
  • 总结

    以上所述是小编给大家介绍的css实现毛毛虫爬行动作,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!