[分享]css做出太阳出没的效果

CSS是一种网页样式设计语言，可以为网页增加各种效果。其中，可以用CSS制作出太阳出没的效果，让网页更加生动有趣。/设置太阳出没的背景色渐变/ body { background: lineargra...

CSS是一种网页样式设计语言，可以为网页增加各种效果。其中，可以用CSS制作出太阳出没的效果，让网页更加生动有趣。

/*设置太阳出没的背景色渐变*/
body {
  background: linear-gradient(to bottom, #FFD89B, #F4A16C);
}

/*设置太阳*/
.sun {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFF2BE, #FFB347);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: sunrise 10s linear infinite;
}

/*设置太阳出没的动画*/
@keyframes sunrise {
  0%, 49.9% {
    background: radial-gradient(circle at 50% 50%, #FFF2BE, #FFB347);
  }
  50%, 100% {
    background: radial-gradient(circle at 50% 120%, #FF9900, #FF6600);
  }
}

/*设置太阳光芒*/
.sun::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: -50px;
  left: -50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: shine 10s linear infinite;
}

/*设置太阳光芒的动画*/
@keyframes shine {
  0%, 49.9% {
    transform: scale(0);
  }
  50%, 100% {
    transform: scale(1);
  }
} 

代码中，首先设置了太阳出没的背景色渐变，使网页背景从黄色渐变到橙色。接着，用.sun类设置了太阳，指定了宽高、圆角、背景色等属性，并设置了它的位置在网页的中心位置。同时，用animation属性设置了太阳出没的动画效果。

为了增加太阳光芒的效果，使用了sun::before伪元素，设定大小、位置及颜色，并使用动画效果，变化着大小，从而形成光芒的效果。

最后，将这些CSS样式代码嵌入网页中，就可以实现太阳出没的效果啦！