html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

纯CSS如何实现带动画的天气图标_Div+Css教程

[ ] 已经帮助:人解决问题

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

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

  下面我们来做一个会下雨的天气图标实例,过程其实很简单哦。7yhHTML5中文学习网 - HTML5先行者学习网

css-rainy-icon

  STEP1: 整体HTML架构7yhHTML5中文学习网 - HTML5先行者学习网

<div class="icon rainy">7yhHTML5中文学习网 - HTML5先行者学习网

<div class="cloud"></div>7yhHTML5中文学习网 - HTML5先行者学习网

<div class="rain"></div>7yhHTML5中文学习网 - HTML5先行者学习网

</div>7yhHTML5中文学习网 - HTML5先行者学习网

  STEP2: 用CSS绘制云朵图标7yhHTML5中文学习网 - HTML5先行者学习网

  CSS代码如下7yhHTML5中文学习网 - HTML5先行者学习网

  body {7yhHTML5中文学习网 - HTML5先行者学习网

  max-width: 42em;7yhHTML5中文学习网 - HTML5先行者学习网

  padding: 2em;7yhHTML5中文学习网 - HTML5先行者学习网

  margin: 0 auto;7yhHTML5中文学习网 - HTML5先行者学习网

  color: #161616;7yhHTML5中文学习网 - HTML5先行者学习网

  font-family: 'Roboto', sans-serif;7yhHTML5中文学习网 - HTML5先行者学习网

  text-align: center;7yhHTML5中文学习网 - HTML5先行者学习网

  background-color: currentColor;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .icon {7yhHTML5中文学习网 - HTML5先行者学习网

  position: relative;7yhHTML5中文学习网 - HTML5先行者学习网

  display: inline-block;7yhHTML5中文学习网 - HTML5先行者学习网

  width: 12em;7yhHTML5中文学习网 - HTML5先行者学习网

  height: 10em;7yhHTML5中文学习网 - HTML5先行者学习网

  font-size: 1em; /* control icon size here */7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .cloud {7yhHTML5中文学习网 - HTML5先行者学习网

  position: absolute;7yhHTML5中文学习网 - HTML5先行者学习网

  z-index: 1;7yhHTML5中文学习网 - HTML5先行者学习网

  top: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  left: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  width: 3.6875em;7yhHTML5中文学习网 - HTML5先行者学习网

  height: 3.6875em;7yhHTML5中文学习网 - HTML5先行者学习网

  margin: -1.84375em;7yhHTML5中文学习网 - HTML5先行者学习网

  background: currentColor;7yhHTML5中文学习网 - HTML5先行者学习网

  border-radius: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  -2.1875em 0.6875em 0 -0.6875em,7yhHTML5中文学习网 - HTML5先行者学习网

  2.0625em 0.9375em 0 -0.9375em,7yhHTML5中文学习网 - HTML5先行者学习网

  0 0 0 0.375em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  -2.1875em 0.6875em 0 -0.3125em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  2.0625em 0.9375em 0 -0.5625em #fff;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .cloud:after {7yhHTML5中文学习网 - HTML5先行者学习网

  content: '';7yhHTML5中文学习网 - HTML5先行者学习网

  position: absolute;7yhHTML5中文学习网 - HTML5先行者学习网

  bottom: 0;7yhHTML5中文学习网 - HTML5先行者学习网

  left: -0.5em;7yhHTML5中文学习网 - HTML5先行者学习网

  display: block;7yhHTML5中文学习网 - HTML5先行者学习网

  width: 4.5625em;7yhHTML5中文学习网 - HTML5先行者学习网

  height: 1em;7yhHTML5中文学习网 - HTML5先行者学习网

  background: currentColor;7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow: 0 0.4375em 0 -0.0625em #fff;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .cloud:nth-child(2) {7yhHTML5中文学习网 - HTML5先行者学习网

  z-index: 0;7yhHTML5中文学习网 - HTML5先行者学习网

  background: #fff;7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  -2.1875em 0.6875em 0 -0.6875em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  2.0625em 0.9375em 0 -0.9375em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  0 0 0 0.375em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  -2.1875em 0.6875em 0 -0.3125em #fff,7yhHTML5中文学习网 - HTML5先行者学习网

  2.0625em 0.9375em 0 -0.5625em #fff;7yhHTML5中文学习网 - HTML5先行者学习网

  opacity: 0.3;7yhHTML5中文学习网 - HTML5先行者学习网

  transform: scale(0.5) translate(6em, -3em);7yhHTML5中文学习网 - HTML5先行者学习网

  animation: cloud 4s linear infinite;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .cloud:nth-child(2):after { background: #fff; }7yhHTML5中文学习网 - HTML5先行者学习网

  .rain{7yhHTML5中文学习网 - HTML5先行者学习网

  position: absolute;7yhHTML5中文学习网 - HTML5先行者学习网

  z-index: 2;7yhHTML5中文学习网 - HTML5先行者学习网

  top: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  left: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  width: 3.75em;7yhHTML5中文学习网 - HTML5先行者学习网

  height: 3.75em;7yhHTML5中文学习网 - HTML5先行者学习网

  margin: 0.375em 0 0 -2em;7yhHTML5中文学习网 - HTML5先行者学习网

  background: currentColor;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  .rain:after {7yhHTML5中文学习网 - HTML5先行者学习网

  content: '';7yhHTML5中文学习网 - HTML5先行者学习网

  position: absolute;7yhHTML5中文学习网 - HTML5先行者学习网

  z-index: 2;7yhHTML5中文学习网 - HTML5先行者学习网

  top: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  left: 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  width: 1.125em;7yhHTML5中文学习网 - HTML5先行者学习网

  height: 1.125em;7yhHTML5中文学习网 - HTML5先行者学习网

  margin: -1em 0 0 -0.25em;7yhHTML5中文学习网 - HTML5先行者学习网

  background: #0cf;7yhHTML5中文学习网 - HTML5先行者学习网

  border-radius: 100% 0 60% 50% / 60% 0 100% 50%;7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -1.375em -0.125em 0 rgba(255,255,255,0.2);7yhHTML5中文学习网 - HTML5先行者学习网

  transform: rotate(-28deg);7yhHTML5中文学习网 - HTML5先行者学习网

  animation: rain 3s linear infinite; /*设置动画 rain */7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  STEP3: 下雨动画7yhHTML5中文学习网 - HTML5先行者学习网

  /* 下雨动画 Animations */7yhHTML5中文学习网 - HTML5先行者学习网

  @keyframes rain {7yhHTML5中文学习网 - HTML5先行者学习网

  0% {7yhHTML5中文学习网 - HTML5先行者学习网

  background: #0cf;7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -1.375em -0.125em 0 #0cf;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  25% {7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -0.875em 1.125em 0 -0.125em #0cf,7yhHTML5中文学习网 - HTML5先行者学习网

  -1.375em -0.125em 0 rgba(255,255,255,0.2);7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  50% {7yhHTML5中文学习网 - HTML5先行者学习网

  background: rgba(255,255,255,0.3);7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  0.625em 0.875em 0 -0.125em #0cf,7yhHTML5中文学习网 - HTML5先行者学习网

  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -1.375em -0.125em 0 rgba(255,255,255,0.2);7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  100% {7yhHTML5中文学习网 - HTML5先行者学习网

  box-shadow:7yhHTML5中文学习网 - HTML5先行者学习网

  0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),7yhHTML5中文学习网 - HTML5先行者学习网

  -1.375em -0.125em 0 #0cf;7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  }7yhHTML5中文学习网 - HTML5先行者学习网

  最图效果:7yhHTML5中文学习网 - HTML5先行者学习网

 7yhHTML5中文学习网 - HTML5先行者学习网

animated-rainy-icon
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助