HTML5纯CSS3实现天气动画图标特效

本Demo是使用CSS3实现动态天气小图标功能、动态天气特效是一款纯CSS3实现的天气出太阳、下雨、雷阵雨等动画、效果非常好看、个人觉得使用CSS3动画图标特效比GIF图片好多了、效果如下

部分CSS3代码

.weather-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.weather-card {
  margin: 20px 20px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  width: 270px;
  height: 270px;
  background-color: white;
  box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
  -webkit-animation: appear 500ms ease-out forwards;
          animation: appear 500ms ease-out forwards;
}
.weather-card h1 {
  position: absolute;
  font-family: ´Lato´, sans-serif;
  font-weight: 300;
  font-size: 80px;
  color: #B8B8B8;
  bottom: 0;
  left: 35px;
  opacity: 0;
  -webkit-transform: translateX(150px);
      -ms-transform: translateX(150px);
          transform: translateX(150px);
  -webkit-animation: title-appear 500ms ease-out 500ms forwards;
          animation: title-appear 500ms ease-out 500ms forwards;
}
.weather-card p {
  position: absolute;
  font-family: ´Lato´, sans-serif;
  font-weight: 300;
  font-size: 28px;
  color: #d2d2d2;
  bottom: 0;
  left: 35px;
  -webkit-animation: title-appear 1s ease-out 500ms forwards;
          animation: title-appear 1s ease-out 500ms forwards;
}

.weather-icon {
  position: relative;
  width: 50px;
  height: 50px;
  top: 0;
  float: right;
  margin: 40px 40px 0 0;
  -webkit-animation: weather-icon-move 5s ease-in-out infinite;
          animation: weather-icon-move 5s ease-in-out infinite;
}

HTML代码

<div class="weather-wrapper">
    <div class="weather-card madrid">
        <div class="weather-icon sun"></div>
        <h1>26º</h1>
        <p>厦门</p>
    </div>
    <div class="weather-card london">
        <div class="weather-icon cloud"></div>
        <h1>14º</h1>
        <p>上海</p>
    </div>
</div>

费话就不多说了、下载源代码可直接运行的

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQAOoxk 密码: 3y7r