css动态背景制作
CSS动态背景制作方法
渐变动态背景
使用CSS的linear-gradient和animation属性创建颜色渐变变化效果：
body {
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}粒子动画背景 通过伪元素创建移动粒子效果：
body {
position: relative;
overflow: hidden;
height: 100vh;
}
body::before {
content: "";
position: absolute;
width: 200vmax;
height: 200vmax;
background:
radial-gradient(circle, rgba(255,255,255,0.8) 2px, transparent 2px);
background-size: 20px 20px;
animation: move 100s linear infinite;
}
@keyframes move {
100% { transform: translate(50%, 50%); }
}视差滚动背景 结合多层背景实现视差效果：
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}SVG动画背景 使用SVG结合CSS动画：
<div class="svg-bg">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0,0 L100,0 L100,100 L0,100 Z" fill="#4b6cb7">
<animate attributeName="d"
dur="10s"
repeatCount="indefinite"
values="M0,0 L100,0 L100,100 L0,100 Z;
M0,0 L100,20 L100,80 L0,100 Z;
M0,0 L100,0 L100,100 L0,100 Z"/>
</path>
</svg>
</div>.svg-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}CSS变量控制动态背景 通过JavaScript动态改变CSS变量值：
:root {
--bg-color-1: #ff9a9e;
--bg-color-2: #fad0c4;
--bg-angle: 45deg;
}
body {
background: linear-gradient(var(--bg-angle), var(--bg-color-1), var(--bg-color-2));
transition: background 0.5s ease;
}setInterval(() => {
document.documentElement.style.setProperty('--bg-angle',
`${Math.floor(Math.random() * 360)}deg`);
}, 2000);这些方法可根据项目需求单独使用或组合使用，通过调整动画时间、颜色和运动参数可获得不同的视觉效果。现代CSS特性如mix-blend-mode和filter可进一步丰富动态背景的表现力。
