首页 > 分享 > 正文

CSS3动画实现天气图标
2018-09-18 09:19:28   来源:灰灰   评论:0 点击:

效果:源码:<!DOCTYPEhtml><html><head><title>纯CSS实现带动画的天气图标< title><styletype="text css">body{max-width:42em;padding:2e
效果:

image.png



源码:

<!DOCTYPE html>
<html>
<head>
<title>纯CSS实现带动画的天气图标</title>
<style type="text/css">
body {
  max-width42em;
  padding2em;
  margin0 auto;
  color#161616;
  font-family'Roboto', sans-serif;
  text-align: center;
  background-color: currentColor;
}
.icon {
  position: relative;
  display: inline-block;
  width12em;
  height10em;
  font-size1em/* control icon size here */
}
.cloud {
  position: absolute;
  z-index1;
  top50%;
  left50%;
  width3.6875em;
  height3.6875em;
  margin: -1.84375em;
  background: currentColor;
  border-radius50%;
  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;
  bottom0;
  left: -0.5em;
  display: block;
  width4.5625em;
  height1em;
  background: currentColor;
  box-shadow0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) {
  z-index0;
  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;
  opacity0.3;
  transformscale(0.5) translate(6em, -3em);
  animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background#fff; }
.sun {
  position: absolute;
  top50%;
  left50%;
  width2.5em;
  height2.5em;
  margin: -1.25em;
  background: currentColor;
  border-radius50%;
  box-shadow0 0 0 0.375em #fff;
  animation: spin 12s infinite linear;
}
.rays {
  position: absolute;
  top: -2em;
  left50%;
  display: block;
  width0.375em;
  height1.125em;
  margin-left: -0.1875em;
  background#fff;
  border-radius0.25em;
  box-shadow0 5.375em #fff;
}
.rays:before,
.rays:after {
  content'';
  position: absolute;
  top0em;
  left0em;
  display: block;
  width0.375em;
  height1.125em;
  transformrotate(60deg);
  transform-origin50% 3.25em;
  background#fff;
  border-radius0.25em;
  box-shadow0 5.375em #fff;
}
.rays:before {
  transformrotate(120deg);
}
.cloud + .sun {
  margin: -2em 1em;
}
.rain,
.lightning,
.snow {
  position: absolute;
  z-index2;
  top50%;
  left50%;
  width3.75em;
  height3.75em;
  margin0.375em 0 0 -2em;
  background: currentColor;
}
.rain:after {
  content'';
  position: absolute;
  z-index2;
  top50%;
  left50%;
  width1.125em;
  height1.125em;
  margin: -1em 0 0 -0.25em;
  background#0cf;
  border-radius100% 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);
  transformrotate(-28deg);
  animation: rain 3s linear infinite;
}
.bolt {
  position: absolute;
  top50%;
  left50%;
  margin: -0.25em 0 0 -0.125em;
  color#fff;
  opacity0.3;
  animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) {
  width0.5em;
  height0.25em;
  margin: -1.75em 0 0 -1.875em;
  transformtranslate(2.5em, 2.25em);
  opacity0.2;
  animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after {
  content'';
  position: absolute;
  z-index2;
  top50%;
  left50%;
  margin: -1.625em 0 0 -1.0125em;
  border-top1.25em solid transparent;
  border-right0.75em solid;
  border-bottom0.75em solid;
  border-left0.5em solid transparent;
  transformskewX(-10deg);
}
.bolt:after {
  margin: -0.25em 0 0 -0.25em;
  border-top0.75em solid;
  border-right0.5em solid transparent;
  border-bottom1.25em solid transparent;
  border-left0.75em solid;
  transformskewX(-10deg);
}
.bolt:nth-child(2):before {
  margin: -0.75em 0 0 -0.5em;
  border-top0.625em solid transparent;
  border-right0.375em solid;
  border-bottom0.375em solid;
  border-left0.25em solid transparent;
}
.bolt:nth-child(2):after {
  margin: -0.125em 0 0 -0.125em;
  border-top0.375em solid;
  border-right0.25em solid transparent;
  border-bottom0.625em solid transparent;
  border-left0.375em solid;
}
.flake:before,
.flake:after {
  content'\2744';
  position: absolute;
  top50%;
  left50%;
  margin: -1.025em 0 0 -1.0125em;
  color#fff;
  list-height1em;
  opacity0.2;
  animation: spin 8s linear infinite reverse;
}
.flake:after {
  margin0.125em 0 0 -1em;
  font-size1.5em;
  opacity0.4;
  animation: spin 14s linear infinite;
}
.flake:nth-child(2):before {
  margin: -0.5em 0 0 0.25em;
  font-size1.25em;
  opacity0.2;
  animation: spin 10s linear infinite;
}
.flake:nth-child(2):after {
  margin0.375em 0 0 0.125em;
  font-size2em;
  opacity0.4;
  animation: spin 16s linear infinite reverse;
}
/* Animations */ 
@keyframes spin {
  100% { transformrotate(360deg); }
}
@keyframes cloud {
  0% { opacity0; }
  50% { opacity0.3; }
  100% {
    opacity0;
    transformscale(0.5) translate(-200%, -3em);
  }
}
@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% {
    backgroundrgba(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;
  }
}
@keyframes lightning {
  45% {
    color#fff;
    background#fff;
    opacity0.2;
  }
  50% {
    color#0cf;
    background#0cf;
    opacity1;
  }
  55% {
    color#fff;
    background#fff;
    opacity0.2;
  }
}
</style>
</head>
<body>
<!-- 阴转多云 -->
<div class="icon sun-shower">
<div class="cloud"></div>
<div class="sun">
<div class="rays"></div>
</div>
<div class="rain"></div>
</div>
<!-- 闪电 -->
<div class="icon thunder-storm">
  <div class="cloud"></div>
  <div class="lightning">
    <div class="bolt"></div>
    <div class="bolt"></div>
  </div>
</div>
<!-- 多云 -->
<div class="icon cloudy">
  <div class="cloud"></div>
  <div class="cloud"></div>
</div>
<!-- 雪 -->
<div class="icon flurries">
  <div class="cloud"></div>
  <div class="snow">
    <div class="flake"></div>
    <div class="flake"></div>
  </div>
</div>
<!-- 晴天 -->
<div class="icon sunny">
  <div class="sun">
    <div class="rays"></div>
  </div>
</div>
<!-- 雨 -->
<div class="icon rainy">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>
</body>
</html>

    相关热词搜索:CSS3 天气 动画

    上一篇:phpcms v9增加文章随机点击数的方法
    下一篇:php 遍历循环文件公用接口

    分享到: 收藏
    这里空拉拉的一点都不好看,我加个这个盒子可能会好看些,只是可能啊!我觉得......
    看了下还是不好看,那再加一个......
    看了下还是不好看,以后在这价格留言功能什么的可能会好些......