纯CSS实现动态的天气图标

作者: alanwhy | 来源:发表于2019-07-17 23:16 被阅读15次

纯CSS实现动态的天气图标
web前端特效演示合集
随手收集
css3动画--图标翻转效果
一些与前端开发有关的有趣的网站
各种纯css图标
css实现input聚焦底部边框动态
纯纯css如何hover之后变成动态图标呢
纯CSS实现动态波浪效果
纯CSS实现苹果系统的相册图标

原文链接：单标签！纯CSS实现动态晴阴雨雪

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>单标签！纯CSS实现动态晴阴雨雪</title>
</head>

<body>
  <div class="weather sunny"></div>
  <div class="weather cloudy"></div>
  <div class="weather rainy"></div>
  <div class="weather snowy"></div>
</body>
<style>
  .weather {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 240px;
    background: #23b7e5;
    border-radius: 8px;
  }

  .sunny:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: #F6D963;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff0;
    z-index: 2;
  }

  .sunny:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -45px 0 0 -45px;
    width: 90px;
    height: 90px;
    background: #FFEB3B;
    clip-path: polygon(50% 0%,
        65.43% 25%,
        93.3% 25%,
        78.87% 50%,
        93.3% 75%,
        64.43% 75%,
        50% 100%,
        35.57% 75%,
        6.7% 75%,
        21.13% 50%,
        6.7% 25%,
        35.57% 25%);
    z-index: 1;
    animation: sunScale 2s linear infinite;
  }

  @keyframes sunScale {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  .cloudy:before,
  .rainy:before,
  .snowy:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
      #fff 22px -15px 0 6px,
      #fff 57px -6px 0 2px,
      #fff 87px 4px 0 -4px,
      #fff 33px 6px 0 6px,
      #fff 61px 6px 0 2px,
      #ccc 29px -23px 0 6px,
      #ccc 64px -14px 0 2px,
      #ccc 94px -4px 0 -4px;
    z-index: 2;
  }

  .cloudy:before {
    animation: cloudMove 2s linear infinite;
  }

  @keyframes cloudMove {
    0% {
      transform: translate(-50%, -50%);
    }

    50% {
      transform: translate(-50%, -60%);
    }

    100% {
      transform: translate(-50%, -50%);
    }
  }

  .rainy:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    width: 4px;
    height: 14px;
    background: #fff;
    border-radius: 2px;
    box-shadow:
      #fff 25px -10px 0,
      #fff 50px 0 0,
      #fff 75px -10px 0,
      #fff 0 25px 0,
      #fff 25px 15px 0,
      #fff 50px 25px 0,
      #fff 75px 15px 0,
      #fff 0 50px 0,
      #fff 25px 40px 0,
      #fff 50px 50px 0,
      #fff 75px 40px 0;
    animation: rainDrop 2s linear infinite;
  }

  @keyframes rainDrop {
    0% {
      transform: translate(0, 0) rotate(10deg);
    }

    100% {
      transform: translate(-4px, 24px) rotate(10deg);
      box-shadow:
        #fff 25px -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        rgba(255, 255, 255, 0) 0 50px 0,
        rgba(255, 255, 255, 0) 25px 40px 0,
        rgba(255, 255, 255, 0) 50px 50px 0,
        rgba(255, 255, 255, 0) 75px 40px 0;
    }
  }

  .snowy:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
      #fff 25px -10px 0,
      #fff 50px 0 0,
      #fff 75px -10px 0,
      #fff 0 25px 0,
      #fff 25px 15px 0,
      #fff 50px 25px 0,
      #fff 75px 15px 0,
      #fff 0 50px 0,
      #fff 25px 40px 0,
      #fff 50px 50px 0,
      #fff 75px 40px 0;
    animation: snowDrop 2s linear infinite;
  }

  @keyframes snowDrop {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(25px);
      box-shadow:
        #fff 25px -10px 0,
        #fff 50px 0 0,
        #fff 75px -10px 0,
        #fff 0 25px 0,
        #fff 25px 15px 0,
        #fff 50px 25px 0,
        #fff 75px 15px 0,
        rgba(255, 255, 255, 0) 0 50px 0,
        rgba(255, 255, 255, 0) 25px 40px 0,
        rgba(255, 255, 255, 0) 50px 50px 0,
        rgba(255, 255, 255, 0) 75px 40px 0;
    }
  }
</style>

</html>