【技术分享】网站背景添加云雾特效-CSS实现网站博客动态飘云动画

安鹿介绍为网站添加动态云雾背景特效的方法。

通过在后台自定义CSS中添加预设代码，定义两层云雾图片和动画效果，利用不同时长的线性平移动画模拟云雾流动。

同时包含响应式适配（移动端缩短动画时长），并在footer.php中引入HTML结构，实现全屏覆盖的沉浸式云雾背景效果。

后台-设置外观-开发者设置-自定义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)}}
<!--云雾特效结束-->

 

编辑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>
<!--云雾特效结束-->