• 【css | loading】各种简单的loading特效

    先看一下简单的效果图

     线上预览

    https://code.juejin.cn/pen/7278511766991339579

    代码

    HTML

    1.  
    2.     <section>
    3.       <div class="sk-rotating-plane">div>
    4.     section>
    5.     
    6.     <section>
    7.       <div class="sk-double-bounce">
    8.         <div class="sk-child sk-double-bounce-1">div>
    9.         <div class="sk-child sk-double-bounce-2">div>
    10.       div>
    11.     section>
    12.     
    13.     <section>
    14.       <div class="sk-wave">
    15.         <div class="sk-rect sk-rect-1">div>
    16.         <div class="sk-rect sk-rect-2">div>
    17.         <div class="sk-rect sk-rect-3">div>
    18.         <div class="sk-rect sk-rect-4">div>
    19.         <div class="sk-rect sk-rect-5">div>
    20.       div>
    21.     section>
    22.     
    23.     <section>
    24.       <div class="sk-wandering-cubes">
    25.         <div class="sk-cube sk-cube-1">div>
    26.         <div class="sk-cube sk-cube-2">div>
    27.       div>
    28.     section>
    29.     
    30.     <section>
    31.       <div class="sk-spinner sk-spinner-pulse">div>
    32.     section>
    33.     
    34.     <section>
    35.       <div class="sk-chasing-dots">
    36.         <div class="sk-child sk-dot-1">div>
    37.         <div class="sk-child sk-dot-2">div>
    38.       div>
    39.     section>
    40.     
    41.     <section>
    42.       <div class="sk-three-bounce">
    43.         <div class="sk-bounce-1 sk-child">div>
    44.         <div class="sk-bounce-2 sk-child">div>
    45.         <div class="sk-bounce-3 sk-child">div>
    46.       div>
    47.     section>
    48.     
    49.     <section>
    50.       <div class="sk-circle-bounce">
    51.         <div class="sk-child sk-circle-1">div>
    52.         <div class="sk-child sk-circle-2">div>
    53.         <div class="sk-child sk-circle-3">div>
    54.         <div class="sk-child sk-circle-4">div>
    55.         <div class="sk-child sk-circle-5">div>
    56.         <div class="sk-child sk-circle-6">div>
    57.         <div class="sk-child sk-circle-7">div>
    58.         <div class="sk-child sk-circle-8">div>
    59.         <div class="sk-child sk-circle-9">div>
    60.         <div class="sk-child sk-circle-10">div>
    61.         <div class="sk-child sk-circle-11">div>
    62.         <div class="sk-child sk-circle-12">div>
    63.       div>
    64.     section>
    65.     
    66.     <section>
    67.       <div class="sk-cube-grid">
    68.         <div class="sk-cube sk-cube-1">div>
    69.         <div class="sk-cube sk-cube-2">div>
    70.         <div class="sk-cube sk-cube-3">div>
    71.         <div class="sk-cube sk-cube-4">div>
    72.         <div class="sk-cube sk-cube-5">div>
    73.         <div class="sk-cube sk-cube-6">div>
    74.         <div class="sk-cube sk-cube-7">div>
    75.         <div class="sk-cube sk-cube-8">div>
    76.         <div class="sk-cube sk-cube-9">div>
    77.       div>
    78.     section>
    79.     
    80.     <section>
    81.       <div class="sk-fading-circle">
    82.         <div class="sk-circle sk-circle-1">div>
    83.         <div class="sk-circle sk-circle-2">div>
    84.         <div class="sk-circle sk-circle-3">div>
    85.         <div class="sk-circle sk-circle-4">div>
    86.         <div class="sk-circle sk-circle-5">div>
    87.         <div class="sk-circle sk-circle-6">div>
    88.         <div class="sk-circle sk-circle-7">div>
    89.         <div class="sk-circle sk-circle-8">div>
    90.         <div class="sk-circle sk-circle-9">div>
    91.         <div class="sk-circle sk-circle-10">div>
    92.         <div class="sk-circle sk-circle-11">div>
    93.         <div class="sk-circle sk-circle-12">div>
    94.       div>
    95.     section>
    96.     
    97.     <section>
    98.       <div class="sk-folding-cube">
    99.         <div class="sk-cube sk-cube-1">div>
    100.         <div class="sk-cube sk-cube-2">div>
    101.         <div class="sk-cube sk-cube-4">div>
    102.         <div class="sk-cube sk-cube-3">div>
    103.       div>
    104.     section>
    105.     <section>section>

     css

    1.  body {
    2.     background-color: rgba(0, 0, 0, 0.9);
    3.     min-height: 95vh;
    4.     display: flex;
    5.     flex-wrap: wrap;
    6.     justify-content: space-around;
    7.     align-content: space-around;
    8.   }
    9.  
    10.   section {
    11.     flex: 1 1 25%;
    12.   }
    13.  
    14.   .sk-rotating-plane {
    15.     width: 4em;
    16.     height: 4em;
    17.     margin: auto;
    18.     background-color: #337ab7;
    19.     -webkit-animation: sk-rotating-plane 1.2s infinite ease-in-out;
    20.     animation: sk-rotating-plane 1.2s infinite ease-in-out;
    21.   }
    22.  
    23.   @-webkit-keyframes sk-rotating-plane {
    24.     0% {
    25.       -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    26.       transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    27.     }
    28.     50% {
    29.       -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    30.       transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    31.     }
    32.     100% {
    33.       -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    34.       transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    35.     }
    36.   }
    37.  
    38.   @keyframes sk-rotating-plane {
    39.     0% {
    40.       -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    41.       transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    42.     }
    43.     50% {
    44.       -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    45.       transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    46.     }
    47.     100% {
    48.       -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    49.       transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    50.     }
    51.   }
    52.   .sk-double-bounce {
    53.     width: 4em;
    54.     height: 4em;
    55.     position: relative;
    56.     margin: auto;
    57.   }
    58.   .sk-double-bounce .sk-child {
    59.     width: 100%;
    60.     height: 100%;
    61.     border-radius: 50%;
    62.     background-color: #337ab7;
    63.     opacity: 0.6;
    64.     position: absolute;
    65.     top: 0;
    66.     left: 0;
    67.     -webkit-animation: sk-double-bounce 2s infinite ease-in-out;
    68.     animation: sk-double-bounce 2s infinite ease-in-out;
    69.   }
    70.   .sk-double-bounce .sk-double-bounce-2 {
    71.     -webkit-animation-delay: -1s;
    72.     animation-delay: -1s;
    73.   }
    74.  
    75.   @-webkit-keyframes sk-double-bounce {
    76.     0%,
    77.     100% {
    78.       -webkit-transform: scale(0);
    79.       transform: scale(0);
    80.     }
    81.     50% {
    82.       -webkit-transform: scale(1);
    83.       transform: scale(1);
    84.     }
    85.   }
    86.  
    87.   @keyframes sk-double-bounce {
    88.     0%,
    89.     100% {
    90.       -webkit-transform: scale(0);
    91.       transform: scale(0);
    92.     }
    93.     50% {
    94.       -webkit-transform: scale(1);
    95.       transform: scale(1);
    96.     }
    97.   }
    98.   .sk-wave {
    99.     width: 6em;
    100.     height: 4em;
    101.     margin: auto;
    102.     text-align: center;
    103.     font-size: 1em;
    104.   }
    105.   .sk-wave .sk-rect {
    106.     background-color: #337ab7;
    107.     height: 100%;
    108.     width: 0.5em;
    109.     display: inline-block;
    110.     -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
    111.     animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
    112.   }
    113.   .sk-wave .sk-rect-1 {
    114.     -webkit-animation-delay: -1.2s;
    115.     animation-delay: -1.2s;
    116.   }
    117.   .sk-wave .sk-rect-2 {
    118.     -webkit-animation-delay: -1.1s;
    119.     animation-delay: -1.1s;
    120.   }
    121.   .sk-wave .sk-rect-3 {
    122.     -webkit-animation-delay: -1s;
    123.     animation-delay: -1s;
    124.   }
    125.   .sk-wave .sk-rect-4 {
    126.     -webkit-animation-delay: -0.9s;
    127.     animation-delay: -0.9s;
    128.   }
    129.   .sk-wave .sk-rect-5 {
    130.     -webkit-animation-delay: -0.8s;
    131.     animation-delay: -0.8s;
    132.   }
    133.  
    134.   @-webkit-keyframes sk-wave-stretch-delay {
    135.     0%,
    136.     40%,
    137.     100% {
    138.       -webkit-transform: scaleY(0.4);
    139.       transform: scaleY(0.4);
    140.     }
    141.     20% {
    142.       -webkit-transform: scaleY(1);
    143.       transform: scaleY(1);
    144.     }
    145.   }
    146.  
    147.   @keyframes sk-wave-stretch-delay {
    148.     0%,
    149.     40%,
    150.     100% {
    151.       -webkit-transform: scaleY(0.4);
    152.       transform: scaleY(0.4);
    153.     }
    154.     20% {
    155.       -webkit-transform: scaleY(1);
    156.       transform: scaleY(1);
    157.     }
    158.   }
    159.   .sk-wandering-cubes {
    160.     width: 4em;
    161.     height: 4em;
    162.     position: relative;
    163.     margin: auto;
    164.   }
    165.   .sk-wandering-cubes .sk-cube {
    166.     background-color: #337ab7;
    167.     width: 1em;
    168.     height: 1em;
    169.     position: absolute;
    170.     top: 0;
    171.     left: 0;
    172.     -webkit-animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
    173.     animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
    174.   }
    175.   .sk-wandering-cubes .sk-cube-2 {
    176.     -webkit-animation-delay: -0.9s;
    177.     animation-delay: -0.9s;
    178.   }
    179.  
    180.   @-webkit-keyframes sk-wandering-cubes {
    181.     0% {
    182.       -webkit-transform: rotate(0deg);
    183.       transform: rotate(0deg);
    184.     }
    185.     25% {
    186.       -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
    187.       transform: translateX(2em) rotate(-90deg) scale(0.5);
    188.     }
    189.     50% {
    190.       /* Hack to make FF rotate in the right direction */
    191.       -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
    192.       transform: translateX(2em) translateY(2em) rotate(-179deg);
    193.     }
    194.     50.1% {
    195.       -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
    196.       transform: translateX(2em) translateY(2em) rotate(-180deg);
    197.     }
    198.     75% {
    199.       -webkit-transform: translateX(0) translateY(2em) rotate(-270deg)
    200.         scale(0.5);
    201.       transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
    202.     }
    203.     100% {
    204.       -webkit-transform: rotate(-360deg);
    205.       transform: rotate(-360deg);
    206.     }
    207.   }
    208.  
    209.   @keyframes sk-wandering-cubes {
    210.     0% {
    211.       -webkit-transform: rotate(0deg);
    212.       transform: rotate(0deg);
    213.     }
    214.     25% {
    215.       -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
    216.       transform: translateX(2em) rotate(-90deg) scale(0.5);
    217.     }
    218.     50% {
    219.       /* Hack to make FF rotate in the right direction */
    220.       -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
    221.       transform: translateX(2em) translateY(2em) rotate(-179deg);
    222.     }
    223.     50.1% {
    224.       -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
    225.       transform: translateX(2em) translateY(2em) rotate(-180deg);
    226.     }
    227.     75% {
    228.       -webkit-transform: translateX(0) translateY(2em) rotate(-270deg)
    229.         scale(0.5);
    230.       transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
    231.     }
    232.     100% {
    233.       -webkit-transform: rotate(-360deg);
    234.       transform: rotate(-360deg);
    235.     }
    236.   }
    237.   .sk-spinner-pulse {
    238.     width: 4em;
    239.     height: 4em;
    240.     margin: auto;
    241.     background-color: #337ab7;
    242.     border-radius: 100%;
    243.     -webkit-animation: sk-spinner-pulse 1s infinite ease-in-out;
    244.     animation: sk-spinner-pulse 1s infinite ease-in-out;
    245.   }
    246.  
    247.   @-webkit-keyframes sk-spinner-pulse {
    248.     0% {
    249.       -webkit-transform: scale(0);
    250.       transform: scale(0);
    251.     }
    252.     100% {
    253.       -webkit-transform: scale(1);
    254.       transform: scale(1);
    255.       opacity: 0;
    256.     }
    257.   }
    258.  
    259.   @keyframes sk-spinner-pulse {
    260.     0% {
    261.       -webkit-transform: scale(0);
    262.       transform: scale(0);
    263.     }
    264.     100% {
    265.       -webkit-transform: scale(1);
    266.       transform: scale(1);
    267.       opacity: 0;
    268.     }
    269.   }
    270.   .sk-chasing-dots {
    271.     width: 4em;
    272.     height: 4em;
    273.     position: relative;
    274.     margin: auto;
    275.     text-align: center;
    276.     -webkit-animation: sk-chasing-dots-rotate 2s infinite linear;
    277.     animation: sk-chasing-dots-rotate 2s infinite linear;
    278.   }
    279.   .sk-chasing-dots .sk-child {
    280.     width: 2em;
    281.     height: 2em;
    282.     display: inline-block;
    283.     position: absolute;
    284.     top: 0;
    285.     background-color: #337ab7;
    286.     border-radius: 100%;
    287.     -webkit-animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
    288.     animation: sk-chasing-dots-bounce 2s infinite ease-in-out;
    289.   }
    290.   .sk-chasing-dots .sk-dot-2 {
    291.     top: auto;
    292.     bottom: 0;
    293.     -webkit-animation-delay: -1s;
    294.     animation-delay: -1s;
    295.   }
    296.  
    297.   @-webkit-keyframes sk-chasing-dots-rotate {
    298.     100% {
    299.       -webkit-transform: rotate(360deg);
    300.       transform: rotate(360deg);
    301.     }
    302.   }
    303.  
    304.   @keyframes sk-chasing-dots-rotate {
    305.     100% {
    306.       -webkit-transform: rotate(360deg);
    307.       transform: rotate(360deg);
    308.     }
    309.   }
    310.   @-webkit-keyframes sk-chasing-dots-bounce {
    311.     0%,
    312.     100% {
    313.       -webkit-transform: scale(0);
    314.       transform: scale(0);
    315.     }
    316.     50% {
    317.       -webkit-transform: scale(1);
    318.       transform: scale(1);
    319.     }
    320.   }
    321.   @keyframes sk-chasing-dots-bounce {
    322.     0%,
    323.     100% {
    324.       -webkit-transform: scale(0);
    325.       transform: scale(0);
    326.     }
    327.     50% {
    328.       -webkit-transform: scale(1);
    329.       transform: scale(1);
    330.     }
    331.   }
    332.   .sk-three-bounce {
    333.     width: 8em;
    334.     margin: auto;
    335.     text-align: center;
    336.   }
    337.   .sk-three-bounce .sk-child {
    338.     width: 2em;
    339.     height: 2em;
    340.     background-color: #337ab7;
    341.     border-radius: 100%;
    342.     display: inline-block;
    343.     -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    344.     animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    345.   }
    346.   .sk-three-bounce .sk-bounce-1 {
    347.     -webkit-animation-delay: -0.32s;
    348.     animation-delay: -0.32s;
    349.   }
    350.   .sk-three-bounce .sk-bounce-2 {
    351.     -webkit-animation-delay: -0.16s;
    352.     animation-delay: -0.16s;
    353.   }
    354.  
    355.   @-webkit-keyframes sk-three-bounce {
    356.     0%,
    357.     80%,
    358.     100% {
    359.       -webkit-transform: scale(0);
    360.       transform: scale(0);
    361.     }
    362.     40% {
    363.       -webkit-transform: scale(1);
    364.       transform: scale(1);
    365.     }
    366.   }
    367.  
    368.   @keyframes sk-three-bounce {
    369.     0%,
    370.     80%,
    371.     100% {
    372.       -webkit-transform: scale(0);
    373.       transform: scale(0);
    374.     }
    375.     40% {
    376.       -webkit-transform: scale(1);
    377.       transform: scale(1);
    378.     }
    379.   }
    380.   .sk-circle-bounce {
    381.     width: 4em;
    382.     height: 4em;
    383.     position: relative;
    384.     margin: auto;
    385.   }
    386.   .sk-circle-bounce .sk-child {
    387.     width: 100%;
    388.     height: 100%;
    389.     position: absolute;
    390.     left: 0;
    391.     top: 0;
    392.   }
    393.   .sk-circle-bounce .sk-child:before {
    394.     content: "";
    395.     display: block;
    396.     margin: 0 auto;
    397.     width: 15%;
    398.     height: 15%;
    399.     background-color: #337ab7;
    400.     border-radius: 100%;
    401.     -webkit-animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
    402.     animation: sk-circle-bounce-delay 1.2s infinite ease-in-out both;
    403.   }
    404.   .sk-circle-bounce .sk-circle-2 {
    405.     -webkit-transform: rotate(30deg);
    406.     transform: rotate(30deg);
    407.   }
    408.   .sk-circle-bounce .sk-circle-3 {
    409.     -webkit-transform: rotate(60deg);
    410.     transform: rotate(60deg);
    411.   }
    412.   .sk-circle-bounce .sk-circle-4 {
    413.     -webkit-transform: rotate(90deg);
    414.     transform: rotate(90deg);
    415.   }
    416.   .sk-circle-bounce .sk-circle-5 {
    417.     -webkit-transform: rotate(120deg);
    418.     transform: rotate(120deg);
    419.   }
    420.   .sk-circle-bounce .sk-circle-6 {
    421.     -webkit-transform: rotate(150deg);
    422.     transform: rotate(150deg);
    423.   }
    424.   .sk-circle-bounce .sk-circle-7 {
    425.     -webkit-transform: rotate(180deg);
    426.     transform: rotate(180deg);
    427.   }
    428.   .sk-circle-bounce .sk-circle-8 {
    429.     -webkit-transform: rotate(210deg);
    430.     transform: rotate(210deg);
    431.   }
    432.   .sk-circle-bounce .sk-circle-9 {
    433.     -webkit-transform: rotate(240deg);
    434.     transform: rotate(240deg);
    435.   }
    436.   .sk-circle-bounce .sk-circle-10 {
    437.     -webkit-transform: rotate(270deg);
    438.     transform: rotate(270deg);
    439.   }
    440.   .sk-circle-bounce .sk-circle-11 {
    441.     -webkit-transform: rotate(300deg);
    442.     transform: rotate(300deg);
    443.   }
    444.   .sk-circle-bounce .sk-circle-12 {
    445.     -webkit-transform: rotate(330deg);
    446.     transform: rotate(330deg);
    447.   }
    448.   .sk-circle-bounce .sk-circle-2:before {
    449.     -webkit-animation-delay: -1.1s;
    450.     animation-delay: -1.1s;
    451.   }
    452.   .sk-circle-bounce .sk-circle-3:before {
    453.     -webkit-animation-delay: -1s;
    454.     animation-delay: -1s;
    455.   }
    456.   .sk-circle-bounce .sk-circle-4:before {
    457.     -webkit-animation-delay: -0.9s;
    458.     animation-delay: -0.9s;
    459.   }
    460.   .sk-circle-bounce .sk-circle-5:before {
    461.     -webkit-animation-delay: -0.8s;
    462.     animation-delay: -0.8s;
    463.   }
    464.   .sk-circle-bounce .sk-circle-6:before {
    465.     -webkit-animation-delay: -0.7s;
    466.     animation-delay: -0.7s;
    467.   }
    468.   .sk-circle-bounce .sk-circle-7:before {
    469.     -webkit-animation-delay: -0.6s;
    470.     animation-delay: -0.6s;
    471.   }
    472.   .sk-circle-bounce .sk-circle-8:before {
    473.     -webkit-animation-delay: -0.5s;
    474.     animation-delay: -0.5s;
    475.   }
    476.   .sk-circle-bounce .sk-circle-9:before {
    477.     -webkit-animation-delay: -0.4s;
    478.     animation-delay: -0.4s;
    479.   }
    480.   .sk-circle-bounce .sk-circle-10:before {
    481.     -webkit-animation-delay: -0.3s;
    482.     animation-delay: -0.3s;
    483.   }
    484.   .sk-circle-bounce .sk-circle-11:before {
    485.     -webkit-animation-delay: -0.2s;
    486.     animation-delay: -0.2s;
    487.   }
    488.   .sk-circle-bounce .sk-circle-12:before {
    489.     -webkit-animation-delay: -0.1s;
    490.     animation-delay: -0.1s;
    491.   }
    492.  
    493.   @-webkit-keyframes sk-circle-bounce-delay {
    494.     0%,
    495.     80%,
    496.     100% {
    497.       -webkit-transform: scale(0);
    498.       transform: scale(0);
    499.     }
    500.     40% {
    501.       -webkit-transform: scale(1);
    502.       transform: scale(1);
    503.     }
    504.   }
    505.  
    506.   @keyframes sk-circle-bounce-delay {
    507.     0%,
    508.     80%,
    509.     100% {
    510.       -webkit-transform: scale(0);
    511.       transform: scale(0);
    512.     }
    513.     40% {
    514.       -webkit-transform: scale(1);
    515.       transform: scale(1);
    516.     }
    517.   }
    518.   .sk-cube-grid {
    519.     width: 4em;
    520.     height: 4em;
    521.     margin: auto;
    522.     /*
    523.      * Spinner positions
    524.      * 1 2 3
    525.      * 4 5 6
    526.      * 7 8 9
    527.      */
    528.   }
    529.   .sk-cube-grid .sk-cube {
    530.     width: 33%;
    531.     height: 33%;
    532.     background-color: #337ab7;
    533.     float: left;
    534.     -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
    535.     animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
    536.   }
    537.   .sk-cube-grid .sk-cube-1 {
    538.     -webkit-animation-delay: 0.2s;
    539.     animation-delay: 0.2s;
    540.   }
    541.   .sk-cube-grid .sk-cube-2 {
    542.     -webkit-animation-delay: 0.3s;
    543.     animation-delay: 0.3s;
    544.   }
    545.   .sk-cube-grid .sk-cube-3 {
    546.     -webkit-animation-delay: 0.4s;
    547.     animation-delay: 0.4s;
    548.   }
    549.   .sk-cube-grid .sk-cube-4 {
    550.     -webkit-animation-delay: 0.1s;
    551.     animation-delay: 0.1s;
    552.   }
    553.   .sk-cube-grid .sk-cube-5 {
    554.     -webkit-animation-delay: 0.2s;
    555.     animation-delay: 0.2s;
    556.   }
    557.   .sk-cube-grid .sk-cube-6 {
    558.     -webkit-animation-delay: 0.3s;
    559.     animation-delay: 0.3s;
    560.   }
    561.   .sk-cube-grid .sk-cube-7 {
    562.     -webkit-animation-delay: 0s;
    563.     animation-delay: 0s;
    564.   }
    565.   .sk-cube-grid .sk-cube-8 {
    566.     -webkit-animation-delay: 0.1s;
    567.     animation-delay: 0.1s;
    568.   }
    569.   .sk-cube-grid .sk-cube-9 {
    570.     -webkit-animation-delay: 0.2s;
    571.     animation-delay: 0.2s;
    572.   }
    573.  
    574.   @-webkit-keyframes sk-cube-grid-scale-delay {
    575.     0%,
    576.     70%,
    577.     100% {
    578.       -webkit-transform: scale3D(1, 1, 1);
    579.       transform: scale3D(1, 1, 1);
    580.     }
    581.     35% {
    582.       -webkit-transform: scale3D(0, 0, 1);
    583.       transform: scale3D(0, 0, 1);
    584.     }
    585.   }
    586.  
    587.   @keyframes sk-cube-grid-scale-delay {
    588.     0%,
    589.     70%,
    590.     100% {
    591.       -webkit-transform: scale3D(1, 1, 1);
    592.       transform: scale3D(1, 1, 1);
    593.     }
    594.     35% {
    595.       -webkit-transform: scale3D(0, 0, 1);
    596.       transform: scale3D(0, 0, 1);
    597.     }
    598.   }
    599.   .sk-fading-circle {
    600.     width: 4em;
    601.     height: 4em;
    602.     position: relative;
    603.     margin: auto;
    604.   }
    605.   .sk-fading-circle .sk-circle {
    606.     width: 100%;
    607.     height: 100%;
    608.     position: absolute;
    609.     left: 0;
    610.     top: 0;
    611.   }
    612.   .sk-fading-circle .sk-circle:before {
    613.     content: "";
    614.     display: block;
    615.     margin: 0 auto;
    616.     width: 15%;
    617.     height: 15%;
    618.     background-color: #337ab7;
    619.     border-radius: 100%;
    620.     -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
    621.     animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
    622.   }
    623.   .sk-fading-circle .sk-circle-2 {
    624.     -webkit-transform: rotate(30deg);
    625.     transform: rotate(30deg);
    626.   }
    627.   .sk-fading-circle .sk-circle-3 {
    628.     -webkit-transform: rotate(60deg);
    629.     transform: rotate(60deg);
    630.   }
    631.   .sk-fading-circle .sk-circle-4 {
    632.     -webkit-transform: rotate(90deg);
    633.     transform: rotate(90deg);
    634.   }
    635.   .sk-fading-circle .sk-circle-5 {
    636.     -webkit-transform: rotate(120deg);
    637.     transform: rotate(120deg);
    638.   }
    639.   .sk-fading-circle .sk-circle-6 {
    640.     -webkit-transform: rotate(150deg);
    641.     transform: rotate(150deg);
    642.   }
    643.   .sk-fading-circle .sk-circle-7 {
    644.     -webkit-transform: rotate(180deg);
    645.     transform: rotate(180deg);
    646.   }
    647.   .sk-fading-circle .sk-circle-8 {
    648.     -webkit-transform: rotate(210deg);
    649.     transform: rotate(210deg);
    650.   }
    651.   .sk-fading-circle .sk-circle-9 {
    652.     -webkit-transform: rotate(240deg);
    653.     transform: rotate(240deg);
    654.   }
    655.   .sk-fading-circle .sk-circle-10 {
    656.     -webkit-transform: rotate(270deg);
    657.     transform: rotate(270deg);
    658.   }
    659.   .sk-fading-circle .sk-circle-11 {
    660.     -webkit-transform: rotate(300deg);
    661.     transform: rotate(300deg);
    662.   }
    663.   .sk-fading-circle .sk-circle-12 {
    664.     -webkit-transform: rotate(330deg);
    665.     transform: rotate(330deg);
    666.   }
    667.   .sk-fading-circle .sk-circle-2:before {
    668.     -webkit-animation-delay: -1.1s;
    669.     animation-delay: -1.1s;
    670.   }
    671.   .sk-fading-circle .sk-circle-3:before {
    672.     -webkit-animation-delay: -1s;
    673.     animation-delay: -1s;
    674.   }
    675.   .sk-fading-circle .sk-circle-4:before {
    676.     -webkit-animation-delay: -0.9s;
    677.     animation-delay: -0.9s;
    678.   }
    679.   .sk-fading-circle .sk-circle-5:before {
    680.     -webkit-animation-delay: -0.8s;
    681.     animation-delay: -0.8s;
    682.   }
    683.   .sk-fading-circle .sk-circle-6:before {
    684.     -webkit-animation-delay: -0.7s;
    685.     animation-delay: -0.7s;
    686.   }
    687.   .sk-fading-circle .sk-circle-7:before {
    688.     -webkit-animation-delay: -0.6s;
    689.     animation-delay: -0.6s;
    690.   }
    691.   .sk-fading-circle .sk-circle-8:before {
    692.     -webkit-animation-delay: -0.5s;
    693.     animation-delay: -0.5s;
    694.   }
    695.   .sk-fading-circle .sk-circle-9:before {
    696.     -webkit-animation-delay: -0.4s;
    697.     animation-delay: -0.4s;
    698.   }
    699.   .sk-fading-circle .sk-circle-10:before {
    700.     -webkit-animation-delay: -0.3s;
    701.     animation-delay: -0.3s;
    702.   }
    703.   .sk-fading-circle .sk-circle-11:before {
    704.     -webkit-animation-delay: -0.2s;
    705.     animation-delay: -0.2s;
    706.   }
    707.   .sk-fading-circle .sk-circle-12:before {
    708.     -webkit-animation-delay: -0.1s;
    709.     animation-delay: -0.1s;
    710.   }
    711.  
    712.   @-webkit-keyframes sk-fading-circle-delay {
    713.     0%,
    714.     39%,
    715.     100% {
    716.       opacity: 0;
    717.     }
    718.     40% {
    719.       opacity: 1;
    720.     }
    721.   }
    722.  
    723.   @keyframes sk-fading-circle-delay {
    724.     0%,
    725.     39%,
    726.     100% {
    727.       opacity: 0;
    728.     }
    729.     40% {
    730.       opacity: 1;
    731.     }
    732.   }
    733.   .sk-folding-cube {
    734.     width: 4em;
    735.     height: 4em;
    736.     position: relative;
    737.     margin: auto;
    738.     -webkit-transform: rotateZ(45deg);
    739.     transform: rotateZ(45deg);
    740.   }
    741.   .sk-folding-cube .sk-cube {
    742.     float: left;
    743.     width: 50%;
    744.     height: 50%;
    745.     position: relative;
    746.     -webkit-transform: scale(1.1);
    747.     transform: scale(1.1);
    748.   }
    749.   .sk-folding-cube .sk-cube:before {
    750.     content: "";
    751.     position: absolute;
    752.     top: 0;
    753.     left: 0;
    754.     width: 100%;
    755.     height: 100%;
    756.     background-color: #337ab7;
    757.     -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
    758.     animation: sk-folding-cube-angle 2.4s infinite linear both;
    759.     -webkit-transform-origin: 100% 100%;
    760.     transform-origin: 100% 100%;
    761.   }
    762.   .sk-folding-cube .sk-cube-2 {
    763.     -webkit-transform: scale(1.1) rotateZ(90deg);
    764.     transform: scale(1.1) rotateZ(90deg);
    765.   }
    766.   .sk-folding-cube .sk-cube-3 {
    767.     -webkit-transform: scale(1.1) rotateZ(180deg);
    768.     transform: scale(1.1) rotateZ(180deg);
    769.   }
    770.   .sk-folding-cube .sk-cube-4 {
    771.     -webkit-transform: scale(1.1) rotateZ(270deg);
    772.     transform: scale(1.1) rotateZ(270deg);
    773.   }
    774.   .sk-folding-cube .sk-cube-2:before {
    775.     -webkit-animation-delay: 0.3s;
    776.     animation-delay: 0.3s;
    777.   }
    778.   .sk-folding-cube .sk-cube-3:before {
    779.     -webkit-animation-delay: 0.6s;
    780.     animation-delay: 0.6s;
    781.   }
    782.   .sk-folding-cube .sk-cube-4:before {
    783.     -webkit-animation-delay: 0.9s;
    784.     animation-delay: 0.9s;
    785.   }
    786.  
    787.   @-webkit-keyframes sk-folding-cube-angle {
    788.     0%,
    789.     10% {
    790.       -webkit-transform: perspective(140px) rotateX(-180deg);
    791.       transform: perspective(140px) rotateX(-180deg);
    792.       opacity: 0;
    793.     }
    794.     25%,
    795.     75% {
    796.       -webkit-transform: perspective(140px) rotateX(0deg);
    797.       transform: perspective(140px) rotateX(0deg);
    798.       opacity: 1;
    799.     }
    800.     90%,
    801.     100% {
    802.       -webkit-transform: perspective(140px) rotateY(180deg);
    803.       transform: perspective(140px) rotateY(180deg);
    804.       opacity: 0;
    805.     }
    806.   }
    807.  
    808.   @keyframes sk-folding-cube-angle {
    809.     0%,
    810.     10% {
    811.       -webkit-transform: perspective(140px) rotateX(-180deg);
    812.       transform: perspective(140px) rotateX(-180deg);
    813.       opacity: 0;
    814.     }
    815.     25%,
    816.     75% {
    817.       -webkit-transform: perspective(140px) rotateX(0deg);
    818.       transform: perspective(140px) rotateX(0deg);
    819.       opacity: 1;
    820.     }
    821.     90%,
    822.     100% {
    823.       -webkit-transform: perspective(140px) rotateY(180deg);
    824.       transform: perspective(140px) rotateY(180deg);
    825.       opacity: 0;
    826.     }
    827.   }

  • 相关阅读:
    SaaSBase：AdsPower是什么？
    基于智能反射面的MIMO系统波束赋形算法代码
    【Javascript】函数隐藏参数ar
    带符号整数
    短链系统设计-存储设计
    Java实操必坑指南二、java泛型、反射、编译优化
    Spring Boot RestController接口如何输出到终端
    化工&python | CSTR连续搅拌反应器系统
    使用kaggle运行机器学习代码的几点注意事项（超重要！！！）
    [hello,world]这个如何将[ ] 去掉
  • 原文地址：https://blog.csdn.net/weixin_43340372/article/details/132880347