纯CSS如何实现带动画的天气图标

2016-06-063lian17 的分享

  静态的天气图标看久了显得呆板,那么下面就分享一个很有才创意的用CSS实现天气带动画的天气图标,代码都分享出来,以这个例子作为参考希望你能得到启发。enjoy!

纯CSS如何实现带动画的天气图标 三联

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

css-rainy-icon

  STEP1: 整体HTML架构

<div class="icon rainy">

<div class="cloud"></div>

<div class="rain"></div>

</div>

  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;

  }

  }

  最图效果:

 

animated-rainy-icon

分享网友

昵称:3lian17TA的收藏