Loading...  >偶然间看到蓝天白云，非常漂亮，便想给自己博客也整一个。 ##直接看教程： <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-40cc5425f6c6b1309187b2b60bb1e1df39" aria-expanded="true"><div class="accordion-toggle"><span>首先放上存档css(这一步可跳过):</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div id="collapse-40cc5425f6c6b1309187b2b60bb1e1df39" class="panel-body collapse"> ```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); } } ``` </div></div> 下面正式开始： 1. 把下面两幅图存在您自己的网站或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)}} ``` 2. 在component/footer.php中搜索`<?php $this->footer(); ?>`，在这一行上面添加 ```html <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> ``` 这个时候您的博客应该有云在飘了~ 3. 如果您想获得蓝天 那么主题背景可以设置为纯色背景，颜色可以设置为`#1B8FFF` <hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：gogobody</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://blog.gogobody.cn/archives/82/">https://blog.gogobody.cn/archives/82/</a></p><p class="content-copyright">转载时须注明出处及本声明</p></blockquote> Last modification：September 25th, 2019 at 10:49 am © 允许规范转载 Support 如果觉得我的文章对你有用，请随意赞赏 ×Close Appreciate the author Sweeping payments Pay by AliPay Pay by WeChat
