分享一组纯css动态好看的天气图标

以下是一些使用纯CSS创建的动画天气图标的例子。这些例子展示了如何使用CSS动画和伪元素来创造特殊的形状和动画效果，从而模拟天气图标。

/* 太阳图标 */
.weather-sun {
  width: 100px;
  height: 100px;
  background-color: #f6d967;
  border-radius: 50%;
  position: relative;
  animation: rotate 5s linear infinite;
}
 
/* 太阳中心 */
.weather-sun::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: #f6d967;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* 旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 下雨图标 */
.weather-rain {
  position: relative;
  width: 100px;
  height: 120px;
  margin: 50px;
}
 
/* 雨滴 */
.weather-rain::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: #3399ff;
  bottom: 10px;
  animation: rain 1s linear infinite;
}
 
/* 雨滴下落动画 */
@keyframes rain {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(50px) translateY(100px);
  }
}

这些例子展示了如何使用伪元素和CSS动画来创建复杂的图形和动画效果。每个例子都是独立的，可以直接复制粘贴到HTML文件中，并通过CSS进行样式化和动画定义。