CSS3实现的几种常用Loading效果

àì夳堔傛蜴生んèń 2023-06-23 09:58 96阅读 0赞

loading加载效果在项目开发中使用频率较高，特意做下记录，方便日后使用，小伙伴么也可以Ctrl+c和Ctrl+v哦

第1种效果：

[![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzYxNC5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzYxNC5naWY 1]

代码如下：

.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种效果：

[![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk5Ny5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk5Ny5naWY 1]

代码如下：

.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种效果：

[![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk3MS5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk3MS5naWY 1][![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzUwNi5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzUwNi5naWY 1][![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzEwMy5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzEwMy5naWY 1]

代码如下：

一、

.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种效果：

[![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwNS5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwNS5naWY 1][![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzI0NS5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzI0NS5naWY 1][![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzE5NS5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzE5NS5naWY 1]

代码如下：

一、

.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种效果：

[![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwMi5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwMi5naWY 1][![aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzY5MC5naWY][]][aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzY5MC5naWY 1]

代码如下：

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;
    }

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzYxNC5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzYxNC5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzYxNC5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338215948426.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk5Ny5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk5Ny5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk5Ny5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338227245982.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk3MS5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk3MS5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzk3MS5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338238299309.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzUwNi5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzUwNi5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzUwNi5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338247171409.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzEwMy5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzEwMy5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzEwMy5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338261289407.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwNS5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwNS5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwNS5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338272151979.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzI0NS5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzI0NS5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzI0NS5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338281522293.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzE5NS5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzE5NS5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzE5NS5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338290698378.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwMi5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwMi5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzgwMi5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338306571390.gif
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzY5MC5naWY]: https://imgconvert.csdnimg.cn/aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzY5MC5naWY
[aHR0cDovL3N0YXRpYy5vcGVuLW9wZW4uY29tL25ld3MvdXBsb2FkSW1nLzIwMTUwNzA2LzIwMTUwNzA2MTQzMzIyXzY5MC5naWY 1]: http://images0.cnblogs.com/blog/694143/201507/051338321206847.gif
[20191229112121499.png]: https://img-blog.csdnimg.cn/20191229112121499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191229112346758.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0,size_16,color_FFFFFF,t_70