纯CSS3 animation制作扁平风格动态天气图标效果

这是一组使用 纯CSS3 animation制作的扁平风格动态天气图标效果。这组天气图标共7个，分别为：晴天，多云，下雨，彩虹，夜间，闪电和下雪。

使用方法

HTML结构

各个图标都是使用一个空的<div>作为容器。有7个预置的class类分别代表各种天气：

<div class="container">
  <div class="sunny"></div> 
  <div class="cloudy"></div>
  <div class="rainy"></div>
  <div class="snowy"></div>
  <div class="rainbow"></div>
  <div class="starry"></div>
  <div class="stormy"></div>
</div>
                

CSS样式

以下雪图标为例，它执行snowy动画，并通过box-shadow属性来这组云朵效果。

.snowy {
  -webkit-animation: snowy 5s ease-in-out infinite 1s;
          animation: snowy 5s ease-in-out infinite 1s;
  background: #FFFFFF; 
  border-radius: 50%;
  box-shadow: 
    #FFFFFF 65px -15px 0 -5px, 
    #FFFFFF 25px -25px, 
    #FFFFFF 30px 10px, 
    #FFFFFF 60px 15px 0 -10px, 
    #FFFFFF 85px 5px 0 -5px;
  display: block;
  height: 50px;
  width: 50px;
  margin-left: -60px;
  position: absolute;
  left: 1112px;
  top: 70px;
}           
                

然后使用:after伪元素来制作云朵的阴影效果。

.snowy:after {
  -webkit-animation: snowy_shadow 5s ease-in-out infinite 1s;
          animation: snowy_shadow 5s ease-in-out infinite 1s;
  background: #000000;
  border-radius: 50%;
  content: '';
  height: 15px;
  width: 120px;
  opacity: 0.2;
  position: absolute;
  left: 8px;
  bottom: -60px;
  -webkit-transform: scale(.7);
          transform: scale(.7);
}                  
                

使用:before伪元素来制作雪花效果。

.snowy:before {
  -webkit-animation: snowy_snow 2s infinite linear;
          animation: snowy_snow 2s infinite linear;
  content: '';
  border-radius: 50%;
  display: block;
  height: 7px;
  width: 7px;
  opacity: 0.8;
  -webkit-transform: scale(.9);
          transform: scale(.9);
}                  
                

这个下雪图标共执行了3个帧动画。

@keyframes snowy {
  50% { transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes snowy_shadow {
  50% { transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity: 0.05; }
}
@keyframes snowy_snow {
  0% {  
    box-shadow: 
      rgba(238,238,238,0) 30px 30px, 
      rgba(238,238,238,0) 40px 40px,  
      #EEEEEE 50px 75px, 
      #EEEEEE 55px 50px, 
      #EEEEEE 70px 100px, 
      #EEEEEE 80px 95px, 
      #EEEEEE 110px 45px, 
      #EEEEEE 90px 35px; 
  }
  25% {  
      box-shadow: 
      #EEEEEE 30px 45px,
      #EEEEEE 40px 60px,
      #EEEEEE 50px 90px,
      #EEEEEE 55px 65px,
      rgba(238,238,238,0) 70px 120px,
      rgba(238,238,238,0) 80px 120px,
      #EEEEEE 110px 70px,
      #EEEEEE 90px 60px;
  }
  26% {  
    box-shadow:
      #EEEEEE 30px 45px,
      #EEEEEE 40px 60px,
      #EEEEEE 50px 90px,
      #EEEEEE 55px 65px,
      rgba(238,238,238,0) 70px 40px,
      rgba(238,238,238,0) 80px 20px,
      #EEEEEE 110px 70px,
      #EEEEEE 90px 60px; 
  }
  50% { 
    box-shadow:
      #EEEEEE 30px 70px,
      #EEEEEE 40px 80px,
      rgba(238,238,238,0) 50px 100px,
      #EEEEEE 55px 80px,
      #EEEEEE 70px 60px,
      #EEEEEE 80px 45px,
      #EEEEEE 110px 95px,
      #EEEEEE 90px 85px;
  }
  51% {
    box-shadow:
      #EEEEEE 30px 70px,
      #EEEEEE 40px 80px,
      rgba(238,238,238,0) 50px 45px,
      #EEEEEE 55px 80px,
      #EEEEEE 70px 60px,
      #EEEEEE 80px 45px,
      #EEEEEE 110px 95px,
      #EEEEEE 90px 85px;
  }
  75% {
    box-shadow:
      #EEEEEE 30px 95px,
      #EEEEEE 40px 100px,
      #EEEEEE 50px 60px,
      rgba(238,238,238,0) 55px 95px,
      #EEEEEE 70px 80px,
      #EEEEEE 80px 70px,
      rgba(238,238,238,0) 110px 120px,
      rgba(238,238,238,0) 90px 110px;
  }
  76% {
    box-shadow:
      #EEEEEE 30px 95px,
      #EEEEEE 40px 100px,
      #EEEEEE 50px 60px,
      rgba(238,238,238,0) 55px 35px,
      #EEEEEE 70px 80px,
      #EEEEEE 80px 70px,
      rgba(238,238,238,0) 110px 25px,
      rgba(238,238,238,0) 90px 15px;
  }
  100% {
    box-shadow:
      rgba(238,238,238,0) 30px 120px,
      rgba(238,238,238,0) 40px 120px,
      #EEEEEE 50px 75px,
      #EEEEEE 55px 50px,
      #EEEEEE 70px 100px,
      #EEEEEE 80px 95px,
      #EEEEEE 110px 45px,
      #EEEEEE 90px 35px;
  }
}