首页 > web前端 > css教程 > 正文

用纯CSS制作带动画的天气图标方法教程

小云云
发布: 2017-12-14 13:15:20
原创
1961 人浏览过

静态的天气图标看久了显得呆板,那么下面就分享一个很有才创意的用CSS实现天气带动画的天气图标,代码都分享出来,以这个例子作为参考希望你能得到启发。enjoy!本文我们主要和大家分享用纯CSS制作带动画的天气图标方法教程,希望能帮助大家。

2017032917234067.gif

  下面我们来做一个会下雨的天气图标实例,过程其实很简单哦。

20170329172342628.gif
  STEP1: 整体HTML架构
  STEP2: 用CSS绘制云朵图标
  CSS代码如下
  body {
  max-width: 42em;
  padding: 2em;
  margin: 0 auto;
  color: #161616;
  font-family: 'Roboto', sans-serif;
  text-align: center;
  background-color: currentColor;
  }
  .icon {
  position: relative;
  display: inline-block;
  width: 12em;
  height: 10em;
  font-size: 1em; /* control icon size here */
  }
  .cloud {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 3.6875em;
  height: 3.6875em;
  margin: -1.84375em;
  background: currentColor;
  border-radius: 50%;
  box-shadow:
  -2.1875em 0.6875em 0 -0.6875em,
  2.0625em 0.9375em 0 -0.9375em,
  0 0 0 0.375em #fff,
  -2.1875em 0.6875em 0 -0.3125em #fff,
  2.0625em 0.9375em 0 -0.5625em #fff;
  }
  .cloud:after {
  content: ''
  position: absolute;
  bottom: 0;
  left: -0.5em;
  display: block;
  width: 4.5625em;
  height: 1em;
  background: currentColor;
  box-shadow: 0 0.4375em 0 -0.0625em #fff;
  }
  .cloud:nth-child(2) {
  z-index: 0;
  background: #fff;
  box-shadow:
  -2.1875em 0.6875em 0 -0.6875em #fff,
  2.0625em 0.9375em 0 -0.9375em #fff,
  0 0 0 0.375em #fff,
  -2.1875em 0.6875em 0 -0.3125em #fff,
  2.0625em 0.9375em 0 -0.5625em #fff;
  opacity: 0.3;
  transform: scale(0.5) translate(6em, -3em);
  animation: cloud 4s linear infinite;
  }
  .cloud:nth-child(2):after { background: #fff; }
  .rain{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 3.75em;
  height: 3.75em;
  margin: 0.375em 0 0 -2em;
  background: currentColor;
  }
  .rain:after {
  content: ''
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1.125em;
  height: 1.125em;
  margin: -1em 0 0 -0.25em;
  background: #0cf;
  border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
  box-shadow:
  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
  -1.375em -0.125em 0 rgba(255,255,255,0.2);
  transform: rotate(-28deg);
  animation: rain 3s linear infinite; /*设置动画 rain */
  }
  STEP3: 下雨动画
  /* 下雨动画 Animations */
  @keyframes rain {
  0% {
  background: #0cf;
  box-shadow:
  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
  -1.375em -0.125em 0 #0cf;
  }
  25% {
  box-shadow:
  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
  -0.875em 1.125em 0 -0.125em #0cf,
  -1.375em -0.125em 0 rgba(255,255,255,0.2);
  }
  50% {
  background: rgba(255,255,255,0.3);
  box-shadow:
  0.625em 0.875em 0 -0.125em #0cf,
  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
  -1.375em -0.125em 0 rgba(255,255,255,0.2);
  }
  100% {
  box-shadow:
  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
  -1.375em -0.125em 0 #0cf;
  }
  }
登录后复制

相关推荐:

CSS动画技巧与细节

关于CSS动画属性的详解

CSS动画 vs JavaScript动画对比

以上是用纯CSS制作带动画的天气图标方法教程的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!