css3 实现loading动画

最新推荐文章于 2024-04-16 10:10:01 发布

东都花神

最新推荐文章于 2024-04-16 10:10:01 发布

阅读量547

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_33988065/article/details/82470510

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏



<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style type="text/css">
    body {
      background: #fff;
    }

    #load {
      position: absolute;
      width: 100%;
      height: 36px;
      left: 50%;
      top: 40%;
      margin-left: -300px;
      overflow: visible;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
    }

    #load div {
      position: absolute;
      width: 20px;
      height: 36px;
      opacity: 0;
      font-family: Helvetica, Arial, sans-serif;
      animation: move 2s linear infinite;
      -o-animation: move 2s linear infinite;
      -moz-animation: move 2s linear infinite;
      -webkit-animation: move 2s linear infinite;
      transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      color: #35C4F0;
    }

    #load div:nth-child(2) {
      animation-delay: 0.2s;
      -o-animation-delay: 0.2s;
      -moz-animation-delay: 0.2s;
      -webkit-animation-delay: 0.2s;
    }

    #load div:nth-child(3) {
      animation-delay: 0.4s;
      -o-animation-delay: 0.4s;
      -webkit-animation-delay: 0.4s;
      -webkit-animation-delay: 0.4s;
    }

    #load div:nth-child(4) {
      animation-delay: 0.6s;
      -o-animation-delay: 0.6s;
      -moz-animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s;
    }

    #load div:nth-child(5) {
      animation-delay: 0.8s;
      -o-animation-delay: 0.8s;
      -moz-animation-delay: 0.8s;
      -webkit-animation-delay: 0.8s;
    }

    #load div:nth-child(6) {
      animation-delay: 1s;
      -o-animation-delay: 1s;
      -moz-animation-delay: 1s;
      -webkit-animation-delay: 1s;
    }

    #load div:nth-child(7) {
      animation-delay: 1.2s;
      -o-animation-delay: 1.2s;
      -moz-animation-delay: 1.2s;
      -webkit-animation-delay: 1.2s;
    }

    @keyframes move {
      0% {
        left: 0;
        opacity: 0;
      }
      35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
      }
    }

    @-moz-keyframes move {
      0% {
        left: 0;
        opacity: 0;
      }
      35% {
        left: 41%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      65% {
        left: 59%;
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      100% {
        left: 100%;
        -moz-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
      }
    }

    @-webkit-keyframes move {
      0% {
        left: 0;
        opacity: 0;
      }
      35% {
        left: 41%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      65% {
        left: 59%;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      100% {
        left: 100%;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
      }
    }

    @-o-keyframes move {
      0% {
        left: 0;
        opacity: 0;
      }
      35% {
        left: 41%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      65% {
        left: 59%;
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        opacity: 1;
      }
      100% {
        left: 100%;
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="load">
    <div>G</div>
    <div>N</div>
    <div>I</div>
    <div>D</div>
    <div>A</div>
    <div>O</div>
    <div>L</div>
  </div>
</body>
</html>

不要点我

东都花神

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 实现loading动画

&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
复制链接

扫一扫