给您的博客背景加上云雾特效

偶然间看到蓝天白云，非常漂亮，便想给自己博客也整一个。

直接看教程：

首先放上存档css(这一步可跳过):

*{margin:0;padding:0;}
            html {
              box-sizing: border-box;
            }
            
            *,
            *:before,
            *:after {
              box-sizing: inherit;
            }
            
            figure {
              margin: 0;
            }
            
            .absolute-bg {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 0;
              height: 100%;
              width: 100%;
              background-position: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              overflow: hidden;
            }
            
            .fog {
              position: relative;
              height: 100vh;
              width: 100%;
              position: fixed;
              top: 0;
              z-index: -1;
            }
            .fog__container {
              position: absolute;
              height: 100%;
              width: 100%;
              overflow: hidden;
            }
            .fog__img {
              position: absolute;
              height: 100vh;
              width: 300vw;
            }
            
            .fog__img--first {
              background: url("https://cdn.jsdelivr.net/gh/gogobody/blog-img/blogimg/20190924230658.png") repeat-x;
              background-size: contain;
              background-position: center;
              -webkit-animation: marquee 60s linear infinite;
                      animation: marquee 60s linear infinite;
            }
            .fog__img--second {
              background: url("https://cdn.jsdelivr.net/gh/gogobody/blog-img/blogimg/20190924230742.png") repeat-x;
              background-size: contain;
              background-position: center;
              -webkit-animation: marquee 40s linear infinite;
                      animation: marquee 40s linear infinite;
            }
            @media screen and (max-width: 767px){
                .fog__img--first{
                    -webkit-animation: marquee 6s linear infinite;
                            animation: marquee 6s linear infinite;
                }
                .fog__img--second{
                    -webkit-animation: marquee 6s linear infinite;
                            animation: marquee 6s linear infinite;
                }
            }
            @-webkit-keyframes marquee {
              0% {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
              }
              100% {
                -webkit-transform: translate3d(-200vw, 0, 0);
                        transform: translate3d(-200vw, 0, 0);
              }
            }
            
            @keyframes marquee {
              0% {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
              }
              100% {
                -webkit-transform: translate3d(-200vw, 0, 0);
                        transform: translate3d(-200vw, 0, 0);
              }
            }

下面正式开始：

把下面两幅图存在您自己的网站或cdn上，并将您的两个图片网址填到下面css代码中的图片1和图片2里，中文标注了！

因为博主的流量出口不够用呀！

图片1：https://cdn.jsdelivr.net/gh/gogobody/blog-img/blogimg/20190924230658.png
图片2：https://cdn.jsdelivr.net/gh/gogobody/blog-img/blogimg/20190924230742.png

然后再复制下面css，添加到自定义css。

*{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("图片1") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("图片2") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}

在component/footer.php中搜索<?php $this->footer(); ?>，在这一行上面添加

    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>

这个时候您的博客应该有云在飘了~