CSS3动画实现加载loading

更多CSS3loading加载效果：https://icons8.com/cssload/en/spinners

第1种效果：

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

.loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }

第2种效果：

loading 2

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 150px;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightgreen;
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
        }
        .loading span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            margin-top: -7px;
            margin-left:-8px;
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes changePosition{
            0%{
                background: lightgreen;
            }
            100%{
                margin-left: 142px;
                background: lightblue;
            }
        }

第3-5种效果：

loading 3

loading 4

loading 5

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

第3-5种效果的css样式分别为：

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1.3);
            }
            100%{
                opacity: 0.2;
                -webkit-transform: scale(.3);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            position: relative;
            margin-top:100px;
        }
        .loading span{
            position: absolute;
            width: 15px;
            height: 100%;
            border-radius: 50%;
            background: lightgreen;
            -webkit-animation: load 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: translate(0px);
            }
            100%{
                opacity: 0.2;
                -webkit-transform: translate(150px);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

第6-8种效果：

loading 6

loading 7

loading 8

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

第6-8种效果的css样式分别为：

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
            text-align: center;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-transform-origin: right bottom;
            -webkit-animation: load 1s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0;
                -webkit-transform: rotate(90deg);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-transform-origin: right bottom;
            -webkit-animation: load 1s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1);
            }
            100%{
                opacity: 0;
                -webkit-transform: rotate(90deg) scale(.3);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

第9-10种效果：

loading 9

loading 10

代码如下：

<div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

CSS样式分别为：

.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -8px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-8px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -8px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }

.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100%{
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 14px;
            top: 14px;
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 0;
            margin-left: -10px;
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 14px;
            right:14px;
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-10px;
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 14px;
            bottom:14px;
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 0;
            left: 50%;
            margin-left: -10px;
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 14px;
            left: 14px;
            -webkit-animation-delay:1.04s;
        }

第11种效果：

loading 11

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

       .loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 60px;
                margin-top: -20px;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.52s;
        }

第12种效果：

loading 12

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            border:5px solid lightgreen;
            -webkit-animation: turn 2s linear infinite;
        }
        .loading span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -15px;
            margin-left: -15px;
            -webkit-animation: changeBgColor 2s linear infinite;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes turn{
            0%{
                -webkit-transform: rotate(0deg);
                border-color: lightgreen;
            }
            100%{
                -webkit-transform: rotate(360deg);
                border-color: lightblue;
            }
        }

第13种效果：

loading 13

代码如下：

<div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

.loading{
            width: 150px;
            height: 15px;
            margin: 0 auto;
            margin-top:100px;
            text-align: center;
        }
        .loading span{
            display: inline-block;
            width: 15px;
            height: 100%;
            margin-right: 5px;
            background: lightgreen;
            -webkit-animation: load 1.04s ease infinite;
        }
        .loading span:last-child{
            margin-right: 0px; 
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
                -webkit-transform: scale(1.2);
            }
            100%{
                opacity: .2;
                -webkit-transform: scale(.2);
            }
        }
        .loading span:nth-child(1){
            -webkit-animation-delay:0.13s;
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.26s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.39s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.52s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.65s;
        }

第四14种效果：

loading 14

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 150px;
            height: 8px;
            border-radius: 4px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightblue;
            overflow: hidden;
        }
        .loading span{
            display:block;
            width: 100%;
            height: 100%;
            border-radius: 3px;
            background: lightgreen;
            -webkit-animation: changePosition 4s linear infinite;
        }
        @-webkit-keyframes changePosition{
            0%{
                -webkit-transform: translate(-150px);
            }
            50%{
                -webkit-transform: translate(0);
            }
            100%{
                -webkit-transform: translate(150px);
            }
        }

第15种效果：

loading 15

代码如下：

<div class="loading">
        <span></span>
</div>

.loading{
            width: 200px;
            height: 60px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
        }
        .loading span{
            width: 50px;
            height: 30px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            top: 50%;
            margin-top: -15px;
            overflow: hidden;
            -webkit-animation: changePosition 2.08s linear infinite;
        }
        @-webkit-keyframes changePosition{
            0%,100%{
                -webkit-transform: translate(70px);
            }
            20%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(0px);
            }
            30%{
                width: 20px;
                height: 60px;
                margin-top:-30px;
                -webkit-transform: translate(0px);
            }
            35%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(5px);
                background: lightblue;
            }
            70%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(160px);
            }
            80%{
                width: 20px;
                height: 60px;
                margin-top:-30px;
                -webkit-transform: translate(160px);
            }
            85%{
                width: 50px;
                height: 30px;
                margin-top:-15px;
                -webkit-transform: translate(155px);
                background: lightgreen;
            }

        }

第16种效果：

loading 16

代码如下：

<div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
</div>

.loadEffect{
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            margin-top:100px;
        }
        .loadEffect span{
            display: inline-block;
            width: 30px;
            height: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: lightgreen;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                opacity: 1;
            }
            100%{
                opacity: 0.2;
            }
        }
        .loadEffect span:nth-child(1){
            left: 0;
            top: 50%;
            margin-top:-5px;
            -webkit-animation-delay:0.13s;
        }
        .loadEffect span:nth-child(2){
            left: 10px;
            top: 20px;
            -webkit-transform: rotate(45deg);
            -webkit-animation-delay:0.26s;
        }
        .loadEffect span:nth-child(3){
            left: 50%;
            top: 10px;
            margin-left: -15px;
            -webkit-transform: rotate(90deg);
            -webkit-animation-delay:0.39s;
        }
        .loadEffect span:nth-child(4){
            top: 20px;
            right:10px;
            -webkit-transform: rotate(135deg);
            -webkit-animation-delay:0.52s;
        }
        .loadEffect span:nth-child(5){
            right: 0;
            top: 50%;
            margin-top:-5px;
            -webkit-transform: rotate(180deg);
            -webkit-animation-delay:0.65s;
        }
        .loadEffect span:nth-child(6){
            right: 10px;
            bottom:20px;
            -webkit-transform: rotate(225deg);
            -webkit-animation-delay:0.78s;
        }
        .loadEffect span:nth-child(7){
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
            -webkit-transform: rotate(270deg);
            -webkit-animation-delay:0.91s;
        }
        .loadEffect span:nth-child(8){
            bottom: 20px;
            left: 10px;
            -webkit-transform: rotate(315deg);
            -webkit-animation-delay:1.04s;
        }

第17种效果：

loading 17

代码如下：

<div class="loadEffect">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>

.loadEffect {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
        }
        .loadEffect div{
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-animation: load 2.08s linear infinite;
        }
        .loadEffect div span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: rotate(0deg);
            }
            10%{
                -webkit-transform: rotate(45deg);
            }
            50%{
                opacity: 1;
                -webkit-transform: rotate(160deg);
            }
            62%{
                opacity: 0;
            }
            65%{
                opacity: 0;
                -webkit-transform: rotate(200deg);
            }
            90%{
                -webkit-transform: rotate(340deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }

        }
        .loadEffect div:nth-child(1){
            -webkit-animation-delay:0.2s;
        }
        .loadEffect div:nth-child(2){
            -webkit-animation-delay:0.4s;
        }
        .loadEffect div:nth-child(3){
            -webkit-animation-delay:0.6s;
        }
        .loadEffect div:nth-child(4){
            -webkit-animation-delay:0.8s;
        }

第18种效果：

loading 18

代码如下：

<div class="loading">
        <div><span></span></div>
        <div><span></span></div>
        <div><span></span></div>
</div>

.loading{
            width: 60px;
            height: 60px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            -webkit-animation: load 3s linear infinite;
        }
        .loading div{
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .loading span{
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #99CC66;
            position: absolute;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            -webkit-animation: changeBgColor 3s ease infinite;
        }
        @-webkit-keyframes load{
            0%{
                -webkit-transform: rotate(0deg);
            }
            33.3%{
                -webkit-transform: rotate(120deg);
            }
            66.6%{
                -webkit-transform: rotate(240deg);
            }
            100%{
                -webkit-transform: rotate(360deg);
            }
        }
        @-webkit-keyframes changeBgColor{
            0%,100%{
                background: #99CC66;
            }
            33.3%{
                background: #FFFF66;
            }
            66.6%{
                background: #FF6666;
            }
        }
        .loading div:nth-child(2){
            -webkit-transform: rotate(120deg);
        }
        .loading div:nth-child(3){
            -webkit-transform: rotate(240deg);
        }
        .loading div:nth-child(2) span{
            -webkit-animation-delay: 1s;
        }
        .loading div:nth-child(3) span{
            -webkit-animation-delay: 2s;
        }

第19种效果(我最喜欢的)：

loading 19

<div class="loading">
 </div>

.loading{
        display: block;
        position: relative;
        width: 150px;
        height: 150px;
        margin: 200px auto;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #e85656;
        transform: translate3d(0,0,0);
        backface-visibility: hidden;
        animation: spin 2s linear infinite;
    }
    .loading::before,.loading::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
    }
    .loading::before {
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #209e91;
        animation: spin 3s linear infinite;
    }
    .loading::after {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #dfb81c;
        animation: spin 1.5s linear infinite;
    }
    @keyframes spin {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

原文链接:https://www.jianshu.com/p/6ac3e3e12d61

最后编辑于：2018.05.29 10:22:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

CSS3动画实现加载loading

更多CSS3loading加载效果：https://icons8.com/cssload/en/spinners

原文链接:https://www.jianshu.com/p/6ac3e3e12d61

推荐阅读更多精彩内容