css制作太阳

2026-02-27 05:56:43CSS

使用CSS制作太阳效果

通过CSS的圆形、渐变和阴影效果可以轻松创建一个太阳的图形。以下是实现方法：

HTML结构

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

CSS样式

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

.sun::after {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background: radial-gradient(circle, transparent 40%, #ff8c0033 70%);
  border-radius: 50%;
  animation: pulse 2s infinite alternate;
}

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

添加太阳光线效果

要创建更逼真的太阳光线，可以添加辐射状的光线效果：

.sun-rays {
  width: 200px;
  height: 200px;
  background: 
    radial-gradient(circle, #ffde00 0%, #ff8c00 70%),
    repeating-conic-gradient(
      from 0deg,
      #ff8c00aa 0deg 10deg,
      transparent 10deg 20deg
    );
  border-radius: 50%;
  filter: blur(1px);
}

动画效果增强

为太阳添加旋转动画和脉动光晕效果：

css制作太阳

.sun-animated {
  animation: 
    rotate 20s linear infinite,
    glow 3s ease-in-out infinite alternate;
}

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

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

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