TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

网站背景云雾特效

醉书生站长
1个月前
0 评论
140 阅读
检测收录...
06/11
本文最后更新于2021年06月12日,已超过49天没有更新,若内容或图片失效,请留言反馈。

想让网站有那种白云缭绕,云里雾里还有点像是神仙MM要出现……恰似朦胧又抓心的那种爷青回感觉?
来吧,少年!我看你骨骼清奇……

演示效果:阴天抬头看天空——就是这么与众不同!

后台-设置外观-开发者设置-自定义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("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.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://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.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)}}
<!--云雾特效结束-->

编辑/usr/themes/Joe/public/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>
<!--云雾特效结束-->
本文共136个字数,您已阅读:平均阅读时长≈1分钟。
朗读
点赞
4
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 06 月 12 日 09 : 14 PM

本文链接:

https://chenyu.me/1405.html(转载时请注明本文出处及文章链接)

暂无评论

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 腾飞博客秀才
    2021-07-31

    1

  2. 腾飞博客秀才
    2021-07-31

    1

  3. 腾飞博客秀才
    2021-07-31

    1

  4. 鑫旺秀才
    2021-07-31
  5. 鑫旺秀才
    2021-07-31