怎么新建MySQL数据库

发布时间:2022-02-23 作者:admin
阅读:627

    这篇文章给大家分享一个loading动画示例,是一个吃豆人的效果。小编觉得挺有趣的,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。

    HTML布局

  <div class="container">
    <div class="loading">
      <div class="eat"></div>
      <div class="load"></div>
      <div class="load"></div>
      <div class="load"></div>
    </div>
  </div>

    CSS 样式

主要使用了动画效果,通过不断控制元素的角度位置实现一个类似于吃豆人一样的loading demo。
    body {
      margin: 0;
      padding: 0;
      background: #fff;
    }
    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .loading {
      position: relative;
      width: 200px;
      height: 50px;
      display: flex;
    }
    .eat {
      position: relative;
      width: 50px;
      height: 50px;
      left: 0;
      color: #ff0000;
      animation: eat-animate 2.4s ease-in-out infinite;
    }
    @keyframes eat-animate {
      100% {
        left: 150px;
      }
    }
    .eat::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      width: 50px;
      height: 25px;
      top: 0;
      border-radius: 50px 50px 0 0;
      background: currentColor;
      transform: rotate(-30deg);
      animation: eat-top 2.4s ease-in-out infinite;
    }
    @keyframes eat-top {
      20% {
        transform: rotate(-30deg);
      }
      35% {
        transform: rotate(0deg);
      }
      45% {
        transform: rotate(-30deg);
      }
      60% {
        transform: rotate(0deg);
      }
      70% {
        transform: rotate(-30deg);
      }
      85% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .eat::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      width: 50px;
      height: 25px;
      bottom: 0;
      border-radius: 0 0 50px 50px;
      background: currentColor;
      transform: rotate(30deg);
      animation: eat-bottom 2.4s ease-in-out infinite;
    }
    @keyframes eat-bottom {
      20% {
        transform: rotate(30deg);
      }
      35% {
        transform: rotate(0deg);
      }
      45% {
        transform: rotate(30deg);
      }
      60% {
        transform: rotate(0deg);
      }
      70% {
        transform: rotate(30deg);
      }
      85% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
    .load {
      position: relative;
      width:30px;
      height: 30px;
      margin: 10px;
      color: #e47272;
      border-radius: 50%;
      background: currentColor;
    }
    .load:nth-child(2) {
      animation: load1 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load1 {
      35% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
    .load:nth-child(3) {
      animation: load2 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load2 {
      30% {
        transform: scale(1);
      }
      58% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }
    .load:nth-child(4) {
      animation: load3 2.4s linear infinite;
      transform: scale(1);
    }
    @keyframes load3 {
      60% {
        transform: scale(1);
      }
      80% {
        transform: scale(0);
      }
      100% {
        transform: scale(0);
      }
    }

    Preview

    以上就是CSS实现loading吃豆人效果的方法介绍啦,上述示例有一定的参考价值,需要的朋友可以了解看看,希望大家阅读完这篇文章能有所收获。最后,想要了解更多loading动画的实现,大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145