当前位置：首页 > CSS

css制作太阳

2026-04-01 05:28:02CSS

使用CSS制作太阳效果

通过CSS的box-shadow和radial-gradient属性可以轻松创建一个太阳效果。以下是具体实现方法：

HTML结构

<div class="sun"></div>

CSS样式

.sun {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ffde00, #ff8c00);
  border-radius: 50%;
  box-shadow: 0 0 50px #ff8c00;
  position: relative;
}

添加光线效果

通过伪元素和transform属性为太阳添加光线：

.sun::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, transparent 40%, #ff8c00 70%);
  border-radius: 50%;
  z-index: -1;
}

动画效果

使用@keyframes为太阳添加脉动动画：

css制作太阳

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.sun {
  animation: pulse 3s infinite;
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .sun {
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #ffde00, #ff8c00);
      border-radius: 50%;
      box-shadow: 0 0 50px #ff8c00;
      position: relative;
      animation: pulse 3s infinite;
    }

    .sun::before {
      content: "";
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      background: radial-gradient(circle, transparent 40%, #ff8c00 70%);
      border-radius: 50%;
      z-index: -1;
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
  </style>
</head>
<body>
  <div class="sun"></div>
</body>
</html>

这些CSS技术组合可以创建一个逼真的太阳效果，包括核心发光和光线扩散效果。调整颜色值、大小和动画参数可以获得不同的视觉效果。