当前位置：首页 > CSS

css制作动漫背景

2026-04-02 00:50:51CSS

使用渐变与动画制作星空背景

通过CSS线性渐变和动画模拟星空效果。背景使用深蓝色渐变，点缀白色圆点作为星星，并添加闪烁动画。

body {
  background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
  height: 100vh;
  overflow: hidden;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.2; }
  100% { opacity: 1; }
}

通过JavaScript动态生成随机位置的星星：

document.addEventListener('DOMContentLoaded', () => {
  for (let i = 0; i < 100; i++) {
    const star = document.createElement('div');
    star.classList.add('star');
    star.style.width = `${Math.random() * 3}px`;
    star.style.height = star.style.width;
    star.style.left = `${Math.random() * 100}vw`;
    star.style.top = `${Math.random() * 100}vh`;
    star.style.animationDelay = `${Math.random() * 2}s`;
    document.body.appendChild(star);
  }
});

创建云朵漂浮动画

使用CSS伪元素和关键帧动画实现云朵缓慢移动的效果。

.cloud {
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: blur(5px);
  opacity: 0.8;
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
  filter: blur(3px);
}

@keyframes float {
  0% { transform: translateX(0); }
  100% { transform: translateX(20vw); }
}

通过JavaScript动态生成云朵：

function createCloud() {
  const cloud = document.createElement('div');
  cloud.classList.add('cloud');
  cloud.style.width = `${100 + Math.random() * 50}px`;
  cloud.style.height = `${60 + Math.random() * 30}px`;
  cloud.style.top = `${10 + Math.random() * 50}vh`;
  cloud.style.left = `-100px`;
  cloud.style.animation = `float ${30 + Math.random() * 30}s linear infinite`;
  document.body.appendChild(cloud);
}
for (let i = 0; i < 5; i++) createCloud();

添加卡通风格山脉轮廓

使用CSS clip-path 属性绘制多边形山脉，配合阴影增强立体感。

.mountains {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30vh;
  background: #2d3436;
  clip-path: polygon(
    0% 100%, 10% 70%, 20% 90%, 30% 60%, 
    40% 80%, 50% 50%, 60% 70%, 70% 40%, 
    80% 60%, 90% 30%, 100% 50%, 100% 100%
  );
  box-shadow: 0 -10px 20px rgba(0,0,0,0.3);
}

整合所有元素

将星空、云朵和山脉组合，形成完整场景。调整层级关系确保视觉效果：

css制作动漫背景

<style>
  body {
    position: relative;
  }
  .mountains { z-index: 1; }
  .cloud { z-index: 2; }
  .star { z-index: 0; }
</style>
<div class="mountains"></div>