svg天气预报动画图标合集效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg天气预报动画图标合集效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
* {
  margin: 0;
  padding: 0;
 }

.element {
  height: 50px;
  width: 50px;
  margin: 10px;
 }

.container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%);
 }

 .elements {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   
 }

.white {fill:#FFFFFF}
.gray {fill:#E0E0E0}
.yellow {fill:#FFEB3B}
</style>



</head>

<body  >
  <div class="container">
      <div class="elements">

        <!-- Cloudy -->
        <div class="element">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60.7 40" style="enable-background:new 0 0 60.7 40;" xml:space="preserve">
            <g id="Cloud_1">
                  <g id="White_cloud_1">
                          <path id="XMLID_2_" class="white" d="M47.2,40H7.9C3.5,40,0,36.5,0,32.1l0,0c0-4.3,3.5-7.9,7.9-7.9h39.4c4.3,0,7.9,3.5,7.9,7.9v0 C55.1,36.5,51.6,40,47.2,40z"/>
                          <circle id="XMLID_3_" class="white" cx="17.4" cy="22.8" r="9.3"/>
                          <circle id="XMLID_4_" class="white" cx="34.5" cy="21.1" r="15.6"/>
                <animateTransform attributeName="transform"
                  attributeType="XML"
                  dur="6s"
                  keyTimes="0;0.5;1"
                  repeatCount="indefinite"
                  type="translate"
                  values="0;5;0"
                  calcMode="linear">
                </animateTransform>
                  </g>
                  <g id="Gray_cloud_1">
                          <path id="XMLID_6_" class="gray" d="M54.7,22.3H33.4c-3.3,0-6-2.7-6-6v0c0-3.3,2.7-6,6-6h21.3c3.3,0,6,2.7,6,6v0 C60.7,19.6,58,22.3,54.7,22.3z"/>
                          <circle id="XMLID_7_" class="gray" cx="45.7" cy="10.7" r="10.7"/>
                <animateTransform attributeName="transform"
                  attributeType="XML"
                  dur="6s"
                  keyTimes="0;0.5;1"
                  repeatCount="indefinite"
                  type="translate"
                  values="0;-3;0"
                  calcMode="linear">
                </animateTransform>
                  </g>
            </g>
          </svg>
        </div>

        <!-- Rainy -->
        <div class="element">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.1 60" style="enable-background:new 0 0 55.1 49.5;" xml:space="preserve">
            <g id="Cloud_2">
                    <g id="Rain_2">
                <path id="rain_2_left" class="white" d="M20.7,46.4c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S20.7,44.7,20.7,46.4z"></path>
                            <path id="rain_2_mid" class="white" d="M31.4,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S31.4,44.7,31.4,46.4z"></path>
                <path id="rain_2_right" class="white" d="M41.3,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S41.3,44.7,41.3,46.4z"></path>
                <animateTransform attributeName="transform"
                  attributeType="XML"
                  dur="1s"
                  keyTimes="0;1"
                  repeatCount="indefinite"
                  type="translate"
                  values="0 0;0 10"
                  calcMode="linear">
                </animateTransform>
                <animate attributeType="CSS"
                attributeName="opacity"
                attributeType="XML"
                dur="1s"
                keyTimes="0;1"
                repeatCount="indefinite"
                values="1;0"
                calcMode="linear"/>
                    </g>
                    <g id="White_cloud_2">
                            <path id="XMLID_14_" class="white" d="M47.2,34.5H7.9c-4.3,0-7.9-3.5-7.9-7.9l0,0c0-4.3,3.5-7.9,7.9-7.9h39.4c4.3,0,7.9,3.5,7.9,7.9 v0C55.1,30.9,51.6,34.5,47.2,34.5z"/>
                            <circle id="XMLID_13_" class="white" cx="17.4" cy="17.3" r="9.3"/>
                            <circle id="XMLID_10_" class="white" cx="34.5" cy="15.6" r="15.6"/>
                    </g>
            </g>
          </svg>
        </div>

        <!-- Cloudy with sun -->
        <div class="element">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 61.7 42.8" style="enable-background:new 0 0 61.7 42.8;" xml:space="preserve">
            <g id="Cloud_3">
              <g id="White_cloud_3">
                      <path id="XMLID_24_" class="white" d="M47.2,42.8H7.9c-4.3,0-7.9-3.5-7.9-7.9l0,0C0,30.5,3.5,27,7.9,27h39.4c4.3,0,7.9,3.5,7.9,7.9 v0C55.1,39.2,51.6,42.8,47.2,42.8z"/>
                      <circle id="XMLID_23_" class="white" cx="17.4" cy="25.5" r="9.3"/>
                      <circle id="XMLID_22_" class="white" cx="34.5" cy="23.9" r="15.6"/>
                <animateTransform attributeName="transform"
                  attributeType="XML"
                  dur="6s"
                  keyTimes="0;0.5;1"
                  repeatCount="indefinite"
                  type="translate"
                  values="0;5;0"
                  calcMode="linear">
                </animateTransform>
              </g>
              <g id="Sun_3">
                      <circle id="XMLID_30_" class="yellow" cx="31.4" cy="18.5" r="9"/>
                <g>
                        <path id="XMLID_31_" class="yellow" d="M31.4,6.6L31.4,6.6c-0.4,0-0.6-0.3-0.6-0.6V0.6C30.8,0.3,31,0,31.3,0l0.1,0 C31.7,0,32,0.3,32,0.6v5.5C32,6.4,31.7,6.6,31.4,6.6z"/>
                        <path id="XMLID_34_" class="yellow" d="M31.4,30.1L31.4,30.1c-0.4,0-0.6,0.3-0.6,0.6v5.5c0,0.3,0.3,0.6,0.6,0.6h0.1 c0.3,0,0.6-0.3,0.6-0.6v-5.5C32,30.4,31.7,30.1,31.4,30.1z"/>
                        <path id="XMLID_35_" class="yellow" d="M19.6,18.3L19.6,18.3c0,0.4-0.3,0.6-0.6,0.6h-5.5c-0.3,0-0.6-0.3-0.6-0.6v-0.1 c0-0.3,0.3-0.6,0.6-0.6H19C19.3,17.8,19.6,18,19.6,18.3z"/>
                        <path id="XMLID_33_" class="yellow" d="M43.1,18.3L43.1,18.3c0,0.4,0.3,0.6,0.6,0.6h5.5c0.3,0,0.6-0.3,0.6-0.6v-0.1 c0-0.3-0.3-0.6-0.6-0.6h-5.5C43.4,17.8,43.1,18,43.1,18.3z"/>
                        <path id="XMLID_37_" class="yellow" d="M22.4,26L22.4,26c0.3,0.3,0.2,0.7,0,0.9l-4.2,3.6c-0.2,0.2-0.6,0.2-0.8-0.1l-0.1-0.1 c-0.2-0.2-0.2-0.6,0.1-0.8l4.2-3.6C21.9,25.8,22.2,25.8,22.4,26z"/>
                        <path id="XMLID_36_" class="yellow" d="M40.3,10.7L40.3,10.7c0.3,0.3,0.6,0.3,0.8,0.1l4.2-3.6c0.2-0.2,0.3-0.6,0.1-0.8l-0.1-0.1 c-0.2-0.2-0.6-0.3-0.8-0.1l-4.2,3.6C40.1,10.1,40,10.5,40.3,10.7z"/>
                        <path id="XMLID_39_" class="yellow" d="M22.4,10.8L22.4,10.8c0.3-0.3,0.2-0.7,0-0.9l-4.2-3.6c-0.2-0.2-0.6-0.2-0.8,0.1l-0.1,0.1 c-0.2,0.2-0.2,0.6,0.1,0.8l4.2,3.6C21.9,11,22.2,11,22.4,10.8z"/>
                        <path id="XMLID_38_" class="yellow" d="M40.3,26.1L40.3,26.1c0.3-0.3,0.6-0.3,0.8-0.1l4.2,3.6c0.2,0.2,0.3,0.6,0.1,0.8l-0.1,0.1 c-0.2,0.2-0.6,0.3-0.8,0.1l-4.2-3.6C40.1,26.7,40,26.3,40.3,26.1z"/>
                  <animate attributeType="CSS"
                    attributeName="opacity"
                    attributeType="XML"
                    dur="0.5s"
                    keyTimes="0;0.5;1"
                    repeatCount="indefinite"
                    values="1;0.6;1"
                    calcMode="linear"/>
                </g>
              </g>
              <animateTransform attributeName="transform"
                attributeType="XML"
                dur="2s"
                keyTimes="0;1"
                repeatCount="indefinite"
                type="scale"
                values="1;1"
                calcMode="linear">
              </animateTransform>
             </g>
             <g id="Gray_cloud_3">
                    <path id="XMLID_20_" class="gray" d="M55.7,25.1H34.4c-3.3,0-6-2.7-6-6v0c0-3.3,2.7-6,6-6h21.3c3.3,0,6,2.7,6,6v0 C61.7,22.4,59,25.1,55.7,25.1z"/>
                    <circle id="XMLID_19_" class="gray" cx="46.7" cy="13.4" r="10.7"/>
              <animateTransform attributeName="transform"
                attributeType="XML"
                dur="6s"
                keyTimes="0;0.5;1"
                repeatCount="indefinite"
                type="translate"
                values="0;-3;0"
                calcMode="linear">
              </animateTransform>
             </g>
           </g>
     .........完整代码请登录后点击上方下载按钮下载查看