关于css3:好看的loading

51次阅读

共计 5567 个字符,预计需要花费 14 分钟才能阅读完成。

1. 大小不一的小圆形加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style="width:100%;height:100vh;display: flex;justify-content: center;background-color: rgb(195, 191, 191);">
    <div class="d1">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
  </div>
  <div class="d1">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
  </div> 
  </div>
</body>
<style>
  *{
      margin: 0;
      padding: 0;
      
  }
  .d1{
      width: 50px;
      height: 50px;
      position: absolute;
      margin: 100px;
  }
  .d1 p{
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(31, 165, 242, 1);
      position: absolute;
      animation: dong 1.5s linear infinite;
  }
  .d1 p:nth-child(1){
      top: 0;
      left: 0;
      
  }
  .d1 p:nth-child(2){
      top: 0;
      right: 0;
      
  }
  .d1 p:nth-child(3){
      right: 0;
      bottom: 0;
      
  }
  .d1 p:nth-child(4){
      bottom: 0;
      left: 0;
  }
  .d1:nth-of-type(2){transform: rotate(45deg);
  }
  @keyframes dong{
      0%{transform: scale(0);
      }
      50%{transform: scale(1);
      }
      100%{transform: scale(0);
      }
  }
  .d1:nth-of-type(1) p:nth-of-type(1){
      /* 负值: 动画间接开始, 但跳过前... 秒动画 */
      animation-delay: -0.1s;
  }
  .d1:nth-of-type(2) p:nth-of-type(1){animation-delay: -0.3s;}
  .d1:nth-of-type(1) p:nth-of-type(2){animation-delay: -0.5s;}
  .d1:nth-of-type(2) p:nth-of-type(2){animation-delay: -0.7s;}
  .d1:nth-of-type(1) p:nth-of-type(3){animation-delay: -0.9s;}
  .d1:nth-of-type(2) p:nth-of-type(3){animation-delay: -1.1s;}
  .d1:nth-of-type(1) p:nth-of-type(4){animation-delay: -1.3s;}
  .d1:nth-of-type(2) p:nth-of-type(4){animation-delay: -1.5s;}
</style>
</html>

成果:

2. 水波 loading
思维:使用旋转动画和 radius 属性即可实现:

去掉彩色背景:

<!DOCTYPE html>
<html lang="en">

<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>
        * {
            margin: 0;
            padding: 0
        }
        body {/* background-color: black */}
        .box {
            margin: 200px auto;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background-color: rgb(0, 174, 255);
            position: relative;
            overflow: hidden;
            border: 1px solid rgb(0, 174, 255);
            border-top: none;
        }
        .a {
            width: 200px;
            height: 200px;
            background: #ffffff;
            position: absolute;
            left: -80px;
            top: -180px;
            border-radius: 80px;
            animation: xuanzhuan 5s linear infinite;
            z-index: 2
        }
        @keyframes xuanzhuan{0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>

</html>

3. 一般的 loading

<!DOCTYPE html>
<html lang="en">
<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>
    *{margin: 0;padding: 0}
    li{list-style: none}
    body,html{background-color: black;}
    ul{
        height: 40px;
        width: 200px;
        margin: 50px auto;
    }
    ul>li{
        float: left;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: white;
        margin-left: 10px;
        animation: move 2s infinite alternate;
        transform: scale(0.5)
    }
    ul>li:nth-of-type(2){animation-delay: 0.5s;}
    ul>li:nth-of-type(3){animation-delay:1s;}

    @keyframes move{0%{transform: scale(0.5);opacity: 0.5}
        100%{transform: scale(1);opacity: 1;}
    }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
</html>

4. 正方形 loading:

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" type="images/x-icon" href="/template/images/ufw.ico">
<title>loading-04</title>
</head>
<body>
<style>
    .csshub-loading-icon{
        padding:10px;
        width:10px;
        height:10px;
        border-top:20px solid #ED5548; 
        border-right:20px solid #599CD3;
        border-bottom: 20px solid #5CBD5E;
        border-left:20px solid #FDD901;
        background:transparent;
        animation: csshub-rotate-right-round 1.2s ease-in-out infinite  alternate ;
    }
    @keyframes csshub-rotate-right-round
        {0% { transform: rotate(0deg);}
        50% {transform: rotate(180deg); }
        100% {transform: rotate(360deg);border-radius:50%;}
    }
</style>
<div style="margin-top: 100px;display: flex;justify-content: center;">
  <div class="csshub-loading-icon"></div>
</div>
</body>
</html>

5. 穿插 loading:

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
</head>

<body>

    <style>
        body {
            background-color: #F5F5F5;
            padding: 100px 120px;
        }

        .box {
            margin-left: 500px;
            display: block;
            width: 64px;
            height: 64px;
            transform-origin: 16px 16px;
            /* 旋转 */
            animation: xuanzhuan 5s infinite;
        }
        /* 平移 */
        .ping {
            animation: pingyi 2.5s infinite;
            position: absolute;
        }
       .hang {
            width: 64px;
            height: 24px;
            position: absolute;
        }
        .hang:nth-child(0) {transform: rotate(0deg);
        }
        .hang:nth-child(1) {transform: rotate(90deg);
        }
        .hang:nth-child(2) {transform: rotate(180deg);
        }
        .hang:nth-child(3) {transform: rotate(270deg);
        }
        /* 第一个小珠子 */
       .ping:nth-child(1) {
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            margin-top: -4px;
            margin-left: -4px;
            border-radius: 4px;
            animation-delay: -0.3s;
        }
        /* 第二个小珠子 */
        .ping:nth-child(2) {
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-top: -8px;
            margin-left: -8px;
            border-radius: 8px;
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
         /* 第三个小珠子 */    
        .ping:nth-child(3) {
            width: 24px;
            height: 24px;
            top: 50%;
            left: 50%;
            margin-top: -12px;
            margin-left: -12px;
            border-radius: 12px;
            animation-delay: -0.9s;
        }

        .blue {background-color: #1f4e5a;}
        .red {background-color: #ff5955;}
        .yellow {background-color: #ffb265;}
        .green {background-color: #00a691;}
        @keyframes xuanzhuan {0% { transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
     }
        @keyframes pingyi {0% {transform: translateX(0);}
             25% {transform: translateX(-64px); }
            75% {transform: translateX(32px);} 
            100% {transform: translateX(0);}
        }
    </style>

        <div class="box">
            <div class="hang">
                <div class="ping blue"></div>
                <div class="ping blue"></div>
                <div class="ping blue"></div>
            </div>

            <div class="hang">
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
                <div class="ping yellow"></div>
            </div>
            <div class="hang">
                <div class="ping red"></div>
                <div class="ping red"></div>
                <div class="ping red"></div>
            </div>
            <div class="hang">
                <div class="ping green"></div>
                <div class="ping green"></div>
                <div class="ping green"></div>
            </div>
        </div>

</body>

</html>

正文完
 0