当前位置：首页 > CSS

css制作太阳

2026-02-12 21:19:32CSS

使用CSS制作太阳效果

通过CSS的box-shadow和radial-gradient可以创建一个逼真的太阳效果。以下是实现步骤：

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

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

添加太阳光芒效果

使用伪元素和transform属性创建射线状光芒：

.sun::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 
    0 0 10px 5px #ff8c00,
    0 0 20px 10px #ff8c00;
  top: -10px;
  left: -10px;
  animation: pulse 2s infinite alternate;
}

@keyframes pulse {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.1);
    opacity: 1;
  }
}

创建动画效果

添加旋转和脉动动画使太阳更生动：

css制作太阳

.sun {
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background: linear-gradient(to bottom, #87CEEB, #1E90FF);
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }

    .sun {
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, #ffde00, #ff8c00);
      border-radius: 50%;
      box-shadow: 0 0 50px #ff8c00, 
                  0 0 100px #ff8c00;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: rotate 20s linear infinite;
    }

    .sun::before {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      background: transparent;
      border-radius: 50%;
      box-shadow: 
        0 0 10px 5px #ff8c00,
        0 0 20px 10px #ff8c00;
      top: -10px;
      left: -10px;
      animation: pulse 2s infinite alternate;
    }

    @keyframes rotate {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes pulse {
      from {
        transform: scale(1);
        opacity: 0.8;
      }
      to {
        transform: scale(1.1);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="sun"></div>
</body>
</html>