HTML5纯CSS3实现天气动画图标特效
2015-06-04 10:17:06  By: shinyuu

• shinyuu
• CSS3教程
• 0
• 9256
• 2

本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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛