css制作太阳

使用CSS制作太阳效果

通过CSS的渐变、阴影和动画属性可以创建一个动态的太阳效果。以下是实现方法：

HTML结构

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

CSS样式

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

@keyframes glow {
  from {
    box-shadow: 0 0 30px #ff8c00;
  }
  to {
    box-shadow: 0 0 60px #ff8c00;
  }
}

添加太阳光线效果

通过伪元素创建向外辐射的光线：

.sun::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent 0deg,
      transparent 10deg,
      rgba(255,140,0,0.3) 10deg,
      rgba(255,140,0,0.3) 20deg
    );
  border-radius: 50%;
  z-index: -1;
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

创建3D太阳效果

添加更多层次增强立体感：

.sun::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(5px);
}

完整太阳动画

组合所有效果并添加脉动动画：

.sun {
  /* 基础样式 */
  animation: 
    glow 2s infinite alternate,
    pulse 3s infinite ease-in-out;
}

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

这些CSS技术组合可以创建一个生动、具有光晕和光线效果的太阳图形，通过调整颜色值、大小和动画参数可以获得不同的视觉效果。