美化教程｜动态向下浮动背景样式

一款动态背景样式，就是向下浮动的一款效果。整体观感更灵动，能给站点页面增加一些层次感和动态氛围。

代码部署

将下面的代码放到CSS样式即可。

body{background:url(背景图片链接) top left,var(--body-bg-color);animation:bgLoop 30s linear infinite}@-webkit-keyframes bgLoop{0%{background-position:0 0}100%{background-position:-1366px 768px}}@keyframes bgLoop{0%{background-position:0 0}100%{background-position:-1366px 768px}}@media screen and (max-width:900px){@-webkit-keyframes bgLoop{100%{background-position:-683px 384px}}@keyframes bgLoop{100%{background-position:-683px 384px}}}

说明：把 背景图片链接 替换成你自己的背景图地址即可。桌面端和移动端都已经带了不同的动画位移参数，直接使用就行。

背景图素材

登录后查看图片

背景图素材.webp

下载

webp文件

28.7K

如果你后面想继续优化，也可以把背景移动速度、动画方向和位移距离再按自己站点风格微调一下。