css动画SVG天气图标

寻梦xunm| 721| 收集

3年前

超过1190天温馨提示

本文最后更新于2021年06月17日，已超过1190天没有更新，若内容或图片失效，请留言反馈。

动画SVG天气图标一系列动画天气图标，纯SVG易于扩展。

html代码

<div class="stage">
  <svg class="thunder-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <path d="M400,64c-5.3,0-10.6,0.4-15.8,1.1C354.3,24.4,307.2,0,256,0s-98.3,24.4-128.2,65.1c-5.2-0.8-10.5-1.1-15.8-1.1
        C50.2,64,0,114.2,0,176s50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c12.3,10.7,26.2,19,40.9,25.4l24.9-24.9
        c-23.5-7.6-44.2-21.3-59.6-39.9c-13,9.2-28.8,14.7-45.9,14.7c-44.2,0-80-35.8-80-80s35.8-80,80-80c10.8,0,21.1,2.2,30.4,6.1
        C163.7,60.7,206.3,32,256,32s92.3,28.7,113.5,70.1c9.4-3.9,19.7-6.1,30.5-6.1c44.2,0,80,35.8,80,80s-35.8,80-80,80
        c-17.1,0-32.9-5.5-45.9-14.7c-10.4,12.5-23.3,22.7-37.6,30.6L303,312.2c20.9-6.6,40.5-16.9,57.3-31.6c12.6,4.8,26,7.3,39.7,7.3
        c61.8,0,112-50.2,112-112S461.8,64,400,64z" />
    <polygon class="bolt" points="192,352 224,384 192,480 288,384 256,352 288,256 " />
  </svg>

  <svg class="rain-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <path class="raindrop-one" d="M96,384c0,17.7,14.3,32,32,32s32-14.3,32-32s-32-64-32-64S96,366.3,96,384z" />
    <path class="raindrop-two" d="M225,480c0,17.7,14.3,32,32,32s32-14.3,32-32s-32-64-32-64S225,462.3,225,480z" />
    <path class="raindrop-three" d="M352,448c0,17.7,14.3,32,32,32s32-14.3,32-32s-32-64-32-64S352,430.3,352,448z" />
    <path d="M400,64c-5.3,0-10.6,0.4-15.8,1.1C354.3,24.4,307.2,0,256,0s-98.3,24.4-128.2,65.1c-5.2-0.8-10.5-1.1-15.8-1.1
        C50.2,64,0,114.2,0,176s50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c29,25.2,65.8,39.3,104.3,39.3c38.5,0,75.3-14.1,104.3-39.3
        c12.6,4.8,26,7.3,39.7,7.3c61.8,0,112-50.2,112-112S461.8,64,400,64z M400,256c-17.1,0-32.9-5.5-45.9-14.7
        C330.6,269.6,295.6,288,256,288c-39.6,0-74.6-18.4-98.1-46.7c-13,9.2-28.8,14.7-45.9,14.7c-44.2,0-80-35.8-80-80s35.8-80,80-80
        c10.8,0,21.1,2.2,30.4,6.1C163.7,60.7,206.3,32,256,32s92.3,28.7,113.5,70.1c9.4-3.9,19.7-6.1,30.5-6.1c44.2,0,80,35.8,80,80
        S444.2,256,400,256z" />
  </svg>

  <svg class="snow-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <path d="M512,176c0-61.8-50.2-112-112-112c-5.3,0-10.6,0.4-15.8,1.1C354.3,24.4,307.2,0,256,0s-98.3,24.4-128.2,65.1
        c-5.2-0.8-10.5-1.1-15.8-1.1C50.2,64,0,114.2,0,176s50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c29,25.2,65.8,39.3,104.3,39.3
        c38.5,0,75.3-14.1,104.3-39.3c12.6,4.8,26,7.3,39.7,7.3C461.8,288,512,237.8,512,176z M354.1,241.3C330.6,269.6,295.6,288,256,288
        c-39.6,0-74.6-18.4-98.1-46.7c-13,9.2-28.8,14.7-45.9,14.7c-44.2,0-80-35.8-80-80s35.8-80,80-80c10.8,0,21.1,2.2,30.4,6.1
        C163.7,60.7,206.3,32,256,32s92.3,28.7,113.5,70.1c9.4-3.9,19.7-6.1,30.5-6.1c44.2,0,80,35.8,80,80s-35.8,80-80,80
        C382.9,256,367.1,250.5,354.1,241.3z" />

    <path class="snowflake-one" d="M131.8,349.9c-1.5-5.6-7.3-8.9-12.9-7.4l-11.9,3.2c-1.1-1.5-2.2-3-3.6-4.4c-1.4-1.4-2.9-2.6-4.5-3.6l3.2-11.9
    c1.5-5.6-1.8-11.4-7.4-12.9c-5.6-1.5-11.4,1.8-12.9,7.4l-3.2,12.1c-3.8,0.3-7.5,1.2-10.9,2.9l-8.8-8.8c-4.1-4.1-10.8-4.1-14.8,0
    c-4.1,4.1-4.1,10.8,0,14.9l8.8,8.8c-1.6,3.5-2.6,7.2-2.9,11l-12,3.2c-5.6,1.5-9,7.2-7.5,12.9c1.5,5.6,7.3,8.9,12.9,7.4l11.9-3.2
    c1.1,1.6,2.2,3.1,3.7,4.5c1.4,1.4,2.9,2.6,4.4,3.6l-3.2,11.9c-1.5,5.6,1.8,11.4,7.4,12.9c5.6,1.5,11.3-1.8,12.8-7.4l3.2-12
    c3.8-0.3,7.5-1.3,11-2.9l8.8,8.8c4.1,4.1,10.7,4,14.8,0c4.1-4.1,4.1-10.7,0-14.8l-8.8-8.8c1.7-3.5,2.7-7.2,2.9-11l12.1-3.2
    C130,361.3,133.3,355.6,131.8,349.9z M88.6,371c-4.1,4.1-10.8,4.1-14.9,0c-4.1-4.1-4.1-10.8,0-14.8c4.1-4.1,10.8-4.1,14.9,0
    S92.6,366.9,88.6,371z" />
    <path class="snowflake-two" d="M304.8,437.6l-12.6-7.2c0.4-2.2,0.7-4.4,0.7-6.7c0-2.3-0.3-4.5-0.7-6.7l12.6-7.2c5.9-3.4,7.9-11,4.5-16.8
    c-3.4-5.9-10.9-7.9-16.8-4.5l-12.7,7.3c-3.4-2.9-7.2-5.2-11.5-6.7v-14.6c0-6.8-5.5-12.3-12.3-12.3s-12.3,5.5-12.3,12.3V389
    c-4.3,1.5-8.1,3.8-11.5,6.7l-12.7-7.3c-5.9-3.4-13.5-1.4-16.9,4.5c-3.4,5.9-1.4,13.4,4.5,16.8l12.5,7.2c-0.4,2.2-0.7,4.4-0.7,6.7
    c0,2.3,0.3,4.5,0.7,6.7l-12.5,7.2c-5.9,3.4-7.9,11-4.5,16.9s10.9,7.9,16.8,4.5l12.7-7.3c3.4,2.9,7.2,5.1,11.5,6.7V473
    c0,6.8,5.5,12.3,12.3,12.3s12.3-5.5,12.3-12.3v-14.6c4.3-1.5,8.2-3.8,11.5-6.7l12.7,7.3c5.9,3.4,13.4,1.4,16.8-4.5
    C312.8,448.6,310.7,441.1,304.8,437.6z M256,436c-6.8,0-12.3-5.5-12.3-12.3c0-6.8,5.5-12.3,12.3-12.3s12.3,5.5,12.3,12.3
    C268.3,430.5,262.8,436,256,436z" />
    <path class="snowflake-three" d="M474.2,396.2l-12.1-3.2c-0.3-3.8-1.2-7.5-2.9-11l8.8-8.8c4.1-4.1,4.1-10.8,0-14.9c-4.1-4.1-10.7-4.1-14.8,0
    l-8.8,8.8c-3.5-1.6-7.1-2.6-11-2.9l-3.2-12.1c-1.5-5.6-7.2-8.9-12.9-7.4c-5.6,1.5-8.9,7.3-7.4,12.9l3.2,11.9
    c-1.6,1.1-3.1,2.3-4.5,3.7c-1.4,1.4-2.5,2.9-3.6,4.5l-11.9-3.2c-5.6-1.5-11.4,1.9-12.9,7.4c-1.5,5.6,1.9,11.4,7.4,12.9l12,3.2
    c0.3,3.8,1.3,7.5,3,11l-8.8,8.8c-4.1,4.1-4.1,10.7,0,14.8c4.1,4.1,10.7,4.1,14.8,0l8.8-8.8c3.5,1.7,7.2,2.7,11,3l3.2,12
    c1.5,5.6,7.2,8.9,12.9,7.4c5.6-1.5,9-7.2,7.5-12.9l-3.2-11.9c1.5-1.1,3-2.2,4.5-3.6c1.4-1.4,2.5-2.9,3.6-4.5l11.9,3.2
    c5.6,1.5,11.4-1.9,12.9-7.4C483.1,403.5,479.8,397.8,474.2,396.2z M438.3,402.9c-4.1,4.1-10.8,4.1-14.9,0c-4.1-4.1-4.1-10.7,0-14.9
    c4.1-4.1,10.8-4.1,14.9,0C442.4,392.2,442.4,398.9,438.3,402.9z" />
  </svg>

  <svg class="sun-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <path class="sun-half" d="M127.8,259.1c3.1-4.3,6.5-8.4,10-12.3c-6-11.2-9.4-24-9.4-37.7c0-44.1,35.7-79.8,79.8-79.8
        c40,0,73.1,29.4,78.9,67.7c11.4,2.3,22.4,5.7,32.9,10.4c-0.4-29.2-12-56.6-32.7-77.3C266.1,109,238,97.4,208.2,97.4
        c-29.9,0-57.9,11.6-79.1,32.8c-21.1,21.1-32.8,49.2-32.8,79.1c0,17.2,3.9,33.9,11.2,48.9c1.5-0.1,3-0.1,4.4-0.1
        C117.3,258,122.6,258.4,127.8,259.1z" />
    <path class="cloud" d="M400,256c-5.3,0-10.6,0.4-15.8,1.1c-16.8-22.8-39-40.5-64.2-51.7c-10.5-4.6-21.5-8.1-32.9-10.4
        c-10.1-2-20.5-3.1-31.1-3.1c-45.8,0-88.4,19.6-118.2,52.9c-3.5,3.9-6.9,8-10,12.3c-5.2-0.8-10.5-1.1-15.8-1.1c-1.5,0-3,0-4.4,0.1
        C47.9,258.4,0,307.7,0,368c0,61.8,50.2,112,112,112c13.7,0,27.1-2.5,39.7-7.3c29,25.2,65.8,39.3,104.3,39.3
        c38.5,0,75.3-14.1,104.3-39.3c12.6,4.8,26,7.3,39.7,7.3c61.8,0,112-50.2,112-112S461.8,256,400,256z M400,448
        c-17.1,0-32.9-5.5-45.9-14.7C330.6,461.6,295.6,480,256,480c-39.6,0-74.6-18.4-98.1-46.7c-13,9.2-28.8,14.7-45.9,14.7
        c-44.2,0-80-35.8-80-80s35.8-80,80-80c7.8,0,15.4,1.2,22.5,3.3c2.7,0.8,5.4,1.7,8,2.8c4.5-8.7,9.9-16.9,16.2-24.4
        C182,241.9,216.8,224,256,224c10.1,0,20,1.2,29.4,3.5c10.6,2.5,20.7,6.4,30.1,11.4c23.2,12.4,42.1,31.8,54.1,55.2
        c9.4-3.9,19.7-6.1,30.5-6.1c44.2,0,80,35.8,80,80S444.2,448,400,448z" />

    <path class="ray ray-one" d="M16,224h32c8.8,0,16-7.2,16-16s-7.2-16-16-16H16c-8.8,0-16,7.2-16,16S7.2,224,16,224z" />
    <path class="ray ray-two" d="M83.5,106.2c6.3,6.2,16.4,6.2,22.6,0c6.3-6.2,6.3-16.4,0-22.6L83.5,60.9c-6.2-6.2-16.4-6.2-22.6,0
        c-6.2,6.2-6.2,16.4,0,22.6L83.5,106.2z" />
    <path class="ray ray-three" d="M208,64c8.8,0,16-7.2,16-16V16c0-8.8-7.2-16-16-16s-16,7.2-16,16v32C192,56.8,199.2,64,208,64z" />
    <path class="ray ray-four" d="M332.4,106.2l22.6-22.6c6.2-6.2,6.2-16.4,0-22.6c-6.2-6.2-16.4-6.2-22.6,0l-22.6,22.6
        c-6.2,6.2-6.2,16.4,0,22.6S326.2,112.4,332.4,106.2z" />
    <path class="ray ray-five" d="M352,208c0,8.8,7.2,16,16,16h32c8.8,0,16-7.2,16-16s-7.2-16-16-16h-32C359.2,192,352,199.2,352,208z" />
  </svg>

  <svg class="sunshine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <path class="sun-full" d="M256,144c-61.8,0-112,50.2-112,112s50.2,112,112,112s112-50.2,112-112S317.8,144,256,144z M256,336
        c-44.2,0-80-35.8-80-80s35.8-80,80-80s80,35.8,80,80S300.2,336,256,336z" />
    <path class="sun-ray-eight" d="M131.6,357.8l-22.6,22.6c-6.2,6.2-6.2,16.4,0,22.6s16.4,6.2,22.6,0l22.6-22.6c6.2-6.3,6.2-16.4,0-22.6
        C147.9,351.6,137.8,351.6,131.6,357.8z" />
    <path class="sun-ray-seven" d="M256,400c-8.8,0-16,7.2-16,16v32c0,8.8,7.2,16,16,16s16-7.2,16-16v-32C272,407.2,264.8,400,256,400z" />
    <path class="sun-ray-six" d="M380.5,357.8c-6.3-6.2-16.4-6.2-22.6,0c-6.3,6.2-6.3,16.4,0,22.6l22.6,22.6c6.2,6.2,16.4,6.2,22.6,0
        s6.2-16.4,0-22.6L380.5,357.8z" />
    <path class="sun-ray-five" d="M448,240h-32c-8.8,0-16,7.2-16,16s7.2,16,16,16h32c8.8,0,16-7.2,16-16S456.8,240,448,240z" />
    <path class="sun-ray-four" d="M380.4,154.2l22.6-22.6c6.2-6.2,6.2-16.4,0-22.6s-16.4-6.2-22.6,0l-22.6,22.6c-6.2,6.2-6.2,16.4,0,22.6
        C364.1,160.4,374.2,160.4,380.4,154.2z" />
    <path class="sun-ray-three" d="M256,112c8.8,0,16-7.2,16-16V64c0-8.8-7.2-16-16-16s-16,7.2-16,16v32C240,104.8,247.2,112,256,112z" />
    <path class="sun-ray-two" d="M131.5,154.2c6.3,6.2,16.4,6.2,22.6,0c6.3-6.2,6.3-16.4,0-22.6l-22.6-22.6c-6.2-6.2-16.4-6.2-22.6,0
        c-6.2,6.2-6.2,16.4,0,22.6L131.5,154.2z" />
    <path class="sun-ray-one" d="M112,256c0-8.8-7.2-16-16-16H64c-8.8,0-16,7.2-16,16s7.2,16,16,16h32C104.8,272,112,264.8,112,256z" />
  </svg>

  <svg class="windy-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
    <g class="cloud-wrap">
    <path class="cloud" d="M417,166.1c-24-24.5-57.1-38.8-91.7-38.8c-34.6,0-67.7,14.2-91.7,38.8c-52.8,2.5-95,46.2-95,99.6
    c0,55,44.7,99.7,99.7,99.7c5.8,0,11.6-0.5,17.3-1.5c20.7,13.5,44.9,20.9,69.7,20.9c24.9,0,49.1-7.3,69.8-20.9
    c5.7,1,11.5,1.5,17.3,1.5c54.9,0,99.6-44.7,99.6-99.7C512,212.3,469.8,168.5,417,166.1z M412.4,333.3c-8.3,0-16.4-1.5-24-4.4
    c-17.5,15.2-39.8,23.8-63.1,23.8c-23.2,0-45.5-8.5-63-23.8c-7.6,2.9-15.8,4.4-24,4.4c-37.3,0-67.7-30.4-67.7-67.7
    c0-37.3,30.4-67.7,67.7-67.7c3.2,0,6.4,0.2,9.5,0.7c18.1-24.6,46.5-39.4,77.5-39.4c30.9,0,59.4,14.8,77.5,39.4
    c3.1-0.5,6.3-0.7,9.6-0.7c37.3,0,67.6,30.4,67.6,67.7C480,303,449.7,333.3,412.4,333.3z" />
    </g>
    <path class="wind-three" d="M144,352H16c-8.8,0-16,7.2-16,16s7.2,16,16,16h128c8.8,0,16-7.2,16-16S152.8,352,144,352z" />
    <path class="wind-two" d="M16,320h94c8.8,0,16-7.2,16-16s-7.2-16-16-16H16c-8.8,0-16,7.2-16,16S7.2,320,16,320z" />
    <path class="wind-one" d="M16,256h64c8.8,0,16-7.2,16-16s-7.2-16-16-16H16c-8.8,0-16,7.2-16,16S7.2,256,16,256z" />
  </svg>
</div>

css样式

body {
  background: #121212;
}

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 96px;
  margin-left: -300px;
  margin-top: -30px;
}

svg {
  width: 48px;
  height: 48px;
  margin: 24px 0 0 40px;
  fill: #fff;
}

/* Thunder Bolt Animation */
.thunder-cloud .bolt {
  animation: flash 2s infinite;
}

@keyframes flash {
  0% {
    transform: translateY(-25px) translateX(25px) scaleY(0.95);
    opacity: 0;
  }
  5%, 25% {
    opacity: 1;
  }
  15%, 20% {
    opacity: 0;
  }
  50% {
    transform: translateY(8px) translateX(-10px);
    opacity: 1;
  }
  80% {
    transform: translateY(8px) translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(-25px) translateX(25px) scaleY(0.95);
    opacity: 0;
  }
}

/* Raindrops Animation */
.rain-cloud .raindrop-one,
.rain-cloud .raindrop-two,
.rain-cloud .raindrop-three {
  opacity: 0;
  animation-timing-function: cubic-bezier(1, 0, 1, 1);
}

.rain-cloud .raindrop-one {
  animation: falling-drop-one 2s infinite;
}

.rain-cloud .raindrop-two {
  animation: falling-drop-two 1.90s infinite;
  animation-delay: 0.8s;
}

.rain-cloud .raindrop-three {
  animation: falling-drop-three 1.80s infinite;
  animation-delay: 0.5s;
}

@keyframes falling-drop-one {
  0% {
    transform: translateY(-35px);
    opacity: 0;
  }
  10% {
    transform: translateY(-15px);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(-35px);
    opacity: 0;
  }
}

@keyframes falling-drop-two {
  0% {
    transform: translateY(-105px);
    opacity: 0;
  }
  10% {
    transform: translateY(-85px);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translateY(5px);
    opacity: 0;
  }
  100% {
    transform: translateY(-105px);
    opacity: 0;
  }
}

@keyframes falling-drop-three {
  0% {
    transform: translateY(-105px);
    opacity: 0;
  }
  10% {
    transform: translateY(-85px);
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translateY(35px);
    opacity: 0;
  }
  100% {
    transform: translateY(-105px);
    opacity: 0;
  }
}

/* Snowflake Animations */
.snow-cloud .snowflake-one,
.snow-cloud .snowflake-two,
.snow-cloud .snowflake-three {
  opacity: 0;
  transform-origin: center center;
  animation-timing-function: ease-in;
}

.snow-cloud .snowflake-one {
  animation: falling-snow-one 4s infinite;
}

.snow-cloud .snowflake-two {
  animation: falling-snow-two 3.8s infinite;
  animation-delay: 2.5s;
}

.snow-cloud .snowflake-three {
  animation: falling-snow-three 3.9s infinite;
  animation-delay: 1.5s;
}

@keyframes falling-snow-one {
  0% {
    transform: translateY(-65px) rotate(0);
    opacity: 0;
  }
  20% {
    transform: translateY(-10px) translateX(30px) rotate(-30deg);
    opacity: 1;
  }
  40% {
    transform: translateY(45px) translateX(-30px) rotate(30deg);
  }
  50% {
    opacity: 1;
  }
  60% {
    transform: translateY(100px) translateX(30px) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: translateY(-65px);
    opacity: 0;
  }
}

@keyframes falling-snow-two {
  0% {
    transform: translateY(-75px) rotate(0);
    opacity: 0;
  }
  20% {
    transform: translateY(-45px) translateX(40px) rotate(-30deg);
    opacity: 1;
  }
  40% {
    transform: translateY(5px) translateX(-40px) rotate(30deg);
  }
  50% {
    opacity: 1;
  }
  60% {
    transform: translateY(30px) translateX(20px) rotate(-30deg);
    opacity: 0;
  }
  100% {
    transform: translateY(-75px);
    opacity: 0;
  }
}

@keyframes falling-snow-three {
  0% {
    transform: translateY(-85px) rotate(0);
    opacity: 0;
  }
  20% {
    transform: translateY(-10px) translateX(-30px) rotate(30deg);
    opacity: 1;
  }
  40% {
    transform: translateY(25px) translateX(30px) rotate(-30deg);
  }
  50% {
    opacity: 1;
  }
  60% {
    transform: translateY(60px) translateX(-30px) rotate(30deg);
    opacity: 0;
  }
  100% {
    transform: translateY(-85px);
    opacity: 0;
  }
}

/* Sunny Cloud Animations */
.sun-cloud .sun-half {
  animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
  transform-origin: bottom center;
}

.sun-cloud .ray-one {
  animation: ray-show-one 4s infinite linear;
  transform-origin: center right;
}
.sun-cloud .ray-two {
  animation: ray-show-two 4s infinite linear;
  transform-origin: bottom right;
}
.sun-cloud .ray-three {
  animation: ray-show-three 4s infinite linear;
  transform-origin: bottom center;
}
.sun-cloud .ray-four {
  animation: ray-show-four 4s infinite linear;
  transform-origin: bottom left;
}
.sun-cloud .ray-five {
  animation: ray-show-five 4s infinite linear;
  transform-origin: center left;
}

@keyframes sun-grow {
  0%, 90%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  15%, 80% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-one {
  0%, 15%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  20%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-two {
  0%, 20%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  25%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-three {
  0%, 25%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  30%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-four {
  0%, 30%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  35%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-five {
  0%, 35%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  40%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-six {
  0%, 40%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  45%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-seven {
  0%, 45%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  50%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ray-show-eight {
  0%, 50%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0;
  }
  55%, 70% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Sunshine Animation */
/* If only using this animation be sure to grab the sun-grow and ray-show-x keyframes set above */
.sunshine .sun-full {
  animation: sun-grow 4s infinite cubic-bezier(0.2, 0.85, 0.4, 1.5);
  transform-origin: center center;
}

.sunshine .sun-ray-one {
  animation: ray-show-one 4s infinite ease-in;
  transform-origin: center right;
}

.sunshine .sun-ray-two {
  animation: ray-show-two 4s infinite ease-in;
  transform-origin: bottom right;
}

.sunshine .sun-ray-three {
  animation: ray-show-three 4s infinite ease-in;
  transform-origin: bottom center;
}

.sunshine .sun-ray-four {
  animation: ray-show-four 4s infinite ease-in;
  transform-origin: bottom left;
}

.sunshine .sun-ray-five {
  animation: ray-show-five 4s infinite ease-in;
  transform-origin: center left;
}

.sunshine .sun-ray-six {
  animation: ray-show-six 4s infinite ease-in;
  transform-origin: top left;
}

.sunshine .sun-ray-seven {
  animation: ray-show-seven 4s infinite ease-in;
  transform-origin: top center;
}

.sunshine .sun-ray-eight {
  animation: ray-show-eight 4s infinite ease-in;
  transform-origin: top right;
}

/* Windy Cloud Animation */
.windy-cloud .cloud-wrap {
  animation: bob 2s infinite cubic-bezier(0,0,.5,1.5);
}
.windy-cloud .cloud {
  animation: cloud-push 4s infinite;
  transform-origin: left center;
}
.windy-cloud .wind-one {
  animation: wind-slide-one 4s infinite;
}
.windy-cloud .wind-two {
  animation: wind-slide-two 4s infinite;
}
.windy-cloud .wind-three {
  animation: wind-slide-three 4s infinite;
}

@keyframes bob {
  0%, 100% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes cloud-push {
  0%, 80%, 100% {
    transform: translateX(-120px) scale(1.2);
  }
  10%, 60% {
    transform: translateX(0) scale(1);
  }
}

@keyframes wind-slide-one {
  0%, 70%, 100% {
    transform: scaleX(0);
    opacity: 0;
  }
  10%, 60% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes wind-slide-two {
  0%, 70%, 100% {
    transform: scaleX(0);
    opacity: 0;
  }
  10%, 60% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes wind-slide-three {
  0%, 70%, 100% {
    transform: scaleX(0);
    opacity: 0;
  }
  10%, 60% {
    transform: scaleX(1);
    opacity: 1;
  }
}

css 特效动画天气图标

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点