当前位置：首页 > CSS

css动态背景制作

2026-03-11 21:35:34CSS

CSS动态背景制作方法

使用CSS动画实现渐变背景 通过@keyframes和linear-gradient可以创建颜色渐变动画：

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;
  background: #000;
}

body::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #fff;
  animation: particle 5s linear infinite;
}

@keyframes particle {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(random(500)-250px, random(500)-250px); opacity: 0; }
}

CSS滤镜动态效果 结合filter属性创建视觉变化：

.animated-bg {
  background-image: url('bg.jpg');
  animation: filterChange 8s infinite alternate;
}

@keyframes filterChange {
  0% { filter: hue-rotate(0deg) blur(0px); }
  50% { filter: hue-rotate(180deg) blur(1px); }
  100% { filter: hue-rotate(360deg) blur(0px); }
}

视差滚动背景 创建多层视差效果需要HTML结构配合：

<div class="parallax">
  <div class="layer layer1"></div>
  <div class="layer layer2"></div>
</div>

.parallax {
  height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.layer1 {
  background: url('layer1.png');
  background-attachment: fixed;
}

.layer2 {
  background: url('layer2.png');
  background-attachment: fixed;
  animation: moveLayer 20s linear infinite;
}

CSS变量控制动态背景 利用CSS变量实现实时调整：

css动态背景制作

:root {
  --bg-color1: #ff0000;
  --bg-color2: #0000ff;
}

.dynamic-bg {
  background: linear-gradient(var(--rotate), var(--bg-color1), var(--bg-color2));
  animation: changeVar 10s infinite;
}

@keyframes changeVar {
  0% { --rotate: 0deg; --bg-color1: #ff0000; }
  50% { --rotate: 180deg; --bg-color1: #00ff00; }
  100% { --rotate: 360deg; --bg-color1: #0000ff; }
}