svg实现全套天气动画图标效果代码

代码语言:html

所属分类:布局界面

代码描述:svg实现全套天气动画图标效果代码

代码标签: 天气 动画 图标 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    @charset "utf-8";
body {
  background: #222;
  box-sizing: border-box;
  color: #fff;
  font-family: "Cabin", sans-serif;
  font-size: 16px;
  text-align: center;
}

.container {
  max-width: 720px;
  width: 95%;
  margin: 0 auto;
}
.container h1 {
  font-size: 2.5em;
}

footer {
  padding-bottom: 2em;
}

svg {
  width: 110px;
}

#smallcloud path {
  will-change: transform;
  -webkit-animation: bgCloud 6s linear infinite;
          animation: bgCloud 6s linear infinite;
}

#bigCloudRain path {
  -webkit-animation: cloud-color 8s ease infinite;
          animation: cloud-color 8s ease infinite;
}

#drop1 {
  -webkit-animation: droplet 1s linear infinite;
          animation: droplet 1s linear infinite;
}

#drop2 {
  -webkit-animation: droplet 1s linear infinite 0.4s;
          animation: droplet 1s linear infinite 0.4s;
}

#drop3 {
  -webkit-animation: droplet 1s linear infinite 0.8s;
          animation: droplet 1s linear infinite 0.8s;
}

#flake3 {
  -webkit-animation: snow-flakes 3s linear infinite;
          animation: snow-flakes 3s linear infinite;
}

#flake1 {
  -webkit-animation: snow-flakes 3s linear infinite 1.2s;
          animation: snow-flakes 3s linear infinite 1.2s;
}

#flake2 {
  -webkit-animation: snow-flakes 3s linear infinite 2s;
          animation: snow-flakes 3s linear infinite 2s;
}

#mistrays path {
  opacity: 1;
}

#mistrays #ray2 {
  stroke-dashoffset: 5;
  stroke-dasharray: 5;
  -webkit-animation: dashXs 9s linear forwards infinite;
          animation: dashXs 9s linear forwards infinite;
}

#mistrays #ray4, #ray5 {
  stroke-dashoffset: 20;
  stroke-dasharray: 20;
  -webkit-animation: dashM 9s linear forwards infinite;
          animation: dashM 9s linear forwards infinite;
}

#mistrays #ray6, #ray7 {
  stroke-dashoffset: 14;
  stroke-dasharray: 14;
  -webkit-animation: dashS 9s linear forwards infinite;
          animation: dashS 9s linear forwards infinite;
}

#mistrays #ray1, #ray3 {
  stroke-dashoffset: 27;
  stroke-dasharray: 27;
  -webkit-animation: dashL 9s linear forwards infinite;
          animation: dashL 9s linear forwards infinite;
}

/*#sunRays, #SunGlobe{
	transform:translate(10px, -12px)
}*/
#sunRays, #sunrays, #SunGlobe {
  transform-origin: 50% 50%;
  -webkit-animation: spin 20s linear infinite;
          animation: spin 20s linear infinite;
}

#totalSun {
  transform: translate(15px, -12px) scale(0.9);
}

#thunder {
  -webkit-animation: thunder-bolt 6s linear infinite;
          animation: thunder-bolt 6s linear infinite;
}

#bigClouds path {
  -webkit-animation: thunder-cloud 6s ease infinite;
          animation: thunder-cloud 6s ease infinite;
}

@-webkit-keyframes bgCloud {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  30% {
    transform: translate(9px, 0px);
    opacity: 1;
  }
  70% {
    transform: translate(27px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(45px, 0px);
    opacity: 0;
  }
}

@keyframes bgCloud {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  30% {
    transform: translate(9px, 0px);
    opacity: 1;
  }
  70% {
    transform: translate(27px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(45px, 0px);
    opacity: 0;
  }
}
@-webkit-keyframes droplet {
  0% {
    transform: translate(0px, -35px);
    opacity: 0;
  }
  30% {
    transform: translate(0px, -18px);
    opacity: 1;
  }
  80% {
    transform: translate(0px, 8px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
}
@keyframes droplet {
  0% {
    transform: translate(0px, -35px);
    opacity: 0;
  }
  30% {
    transform: translate(0px, -18px);
    opacity: 1;
  }
  80% {
    transform: translate(0px, 8px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 20px);
    opacity: 0;
  }
}
@-webkit-keyframes cloud-color {
  0% {
    fill: #F4F4F4;
  }
  50% {
    fill: #c4c4c4;
  }
  100% {
    fill: #F4F4F4;
  }
}
@keyframes cloud-color {
  0% {
    fill: #F4F4F4;
  }
  50% {
    fill: #c4c4c4;
  }
  100% {
    fill: #F4F4F4;
  }
}
@-webkit-keyframes snow-flakes {
  0% {
    transform: translate(0px, -35px);
    opacity: 0;
  }
  30% {
    transform: translate(-10px, -18px);
    opacity: 1;
  }
  40% {
    transform: translate(0px, -8px);
    opacity: 1;
  }
  60% {
    transform: translate(10px, 0px);
    opacity: 1;
  }
  80% {
    transform: translate(0px, 8px);
    opacity: 1;
  }
  100% {
    transform: translate(10px, 20px);
    opacity: 0;
  }
}
@keyframes snow-flakes {
  0% {
    transform: translate(0px, -35px);
    opacity: 0;
  }
  30% {
    transform: translate(-10px, -18px);
    opacity: 1;
  }
  40% {
    transform: translate(0px, -8px);
    opacity: 1;
  }
  60% {
    transform: translate(10px, 0px);
    opacity: 1;
  }
  80% {
    transform: translate(0px, 8px);
    opacity: 1;
  }
  100% {
    transform: translate(10px, 20px);
    opacity: 0;
  }
}
@-webkit-keyframes dashXs {
  0% {
    opacity: 0;
    stroke-dashoffset: 5;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -5;
  }
}
@keyframes dashXs {
  0% {
    opacity: 0;
    stroke-dashoffset: 5;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -5;
  }
}
@-webkit-keyframes dashS {
  0% {
    opacity: 0;
    stroke-dashoffset: 14;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -14;
  }
}
@keyframes dashS {
  0% {
    opacity: 0;
    stroke-dashoffset: 14;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -14;
  }
}
@-webkit-keyframes dashM {
  0% {
    opacity: 0;
    stroke-dashoffset: -20;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 20;
  }
}
@keyframes dashM {
  0% {
    opacity: 0;
    stroke-dashoffset: -20;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 20;
  }
}
@-webkit-keyframes dashL {
  0% {
    opacity: 0;
    stroke-dashoffset: -27;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 27;
  }
}
@keyframes dashL {
  0% {
    opacity: 0;
    stroke-dashoffset: -27;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: 27;
  }
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes thunder-cloud {
  100%, 0% {
    fill: #666;
  }
  20% {
    fill: #555;
  }
  21.5% {
    fill: #999;
  }
  25% {
    fill: #555;
  }
  27.5% {
    fill: #999;
  }
  30% {
    fill: #555;
  }
  40% {
    fill: #999;
  }
  90% {
    fill: #555;
  }
}
@keyframes thunder-cloud {
  100%, 0% {
    fill: #666;
  }
  20% {
    fill: #555;
  }
  21.5% {
    fill: #999;
  }
  25% {
    fill: #555;
  }
  27.5% {
    fill: #999;
  }
  30% {
    fill: #555;
  }
  40% {
    fill: #999;
  }
  90% {
    fill: #555;
  }
}
@-webkit-keyframes thunder-bolt {
  100%, 0% {
    opacity: 0;
  }
  23% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}
@keyframes thunder-bolt {
  100%, 0% {
    opacity: 0;
  }
  23% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}
</style>
</head>
<body>

<div class="container">
  <h1>SVG天气图标动画</h1>
</div>

<div class="container">
<!-- ICONS START -->
<!-- CHUBBYSUN -->
<svg version="1.1" id="sunGlobe" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="sunrays">
	<radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/>
	<radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/>
	<radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/>
	<radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/>
	
		<radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789" gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/>
	<radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"/>
	<radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"/>
	<radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"/>
</g>
<radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776" gradientUnits="userSpaceOnUse">
	<stop  offset="0.3333" style="stop-color:#E3BF4C"/>
	<stop  offset="0.7473" style="stop-color:#F4CE52"/>
	<stop  offset="1" style="stop-color:#F5E16E"/>
</radialGradient>
<ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3" ry="26.5"/>
</svg>
<!-- CHUBBYSUN END -->
<!-- CHUBBYPARTLY SUN -->
<svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g id="totalSun">
<g id="sunRays">
	<radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/>
	<radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/>
	<radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/>
	<radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/>
	
		<radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789" gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/>
	<radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"/>
	<radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"/>
	<radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"/>
<radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776" gradientUnits="userSpaceOnUse">
	<stop  offset="0.3333" style="stop-color:#E3BF4C"/>
	<stop  offset="0.7473" style="stop-color:#F4CE52"/>
	<stop  offset="1" style="stop-color:#F5E16E"/>
</radialGradient>
<ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3" ry="26.5"/>
</g>
</g>
<g id="smallcloud">
	
		<path id="XMLID_3_" fill="#5BCAEB" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="
		M19,39.9c0,0,5.7,1.7,7-1.2c5.4,3,9.1,0.6,11.5,0c0.5,2.3,6.1,1.2,6.1,1.2s10.7-2.6,9.9-11.7c0,0-1.9-12.4-14-10
		c0,0-9.7-9.5-18.6,2.5c0,0-9-0.5-10.3,10C10.6,30.7,10.9,37.8,19,39.9z"/>
</g>
<g id="bigCloud">
	
		<path id="XMLID_9_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="
		M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
		c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
</g>
</svg>
<!-- CHUBBYPARTLY SUN END-->
<!-- CHUBBYPARTLY SUN RAIN -->
 <svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
	 <g id="totalSun">
	 <g id="sunRays">
	<radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/>
	<radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/>
	<radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/>
	<radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/>
	
		<radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789" gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/>
	<radialGradient id="XMLID_16_" cx="30.5864" cy="70.2252" r="6.0153" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_9_" fill="url(#XMLID_16_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M29.3,64.3l7.3,6.3c0,0-3.1,5.4-4.8,5.6s-7.4-5-7.3-6.3C24.6,68.6,29.3,64.3,29.3,64.3z"/>
	<radialGradient id="XMLID_44_" cx="21.0871" cy="50" r="4.8093" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_10_" fill="url(#XMLID_44_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M24.8,44.8l0.6,9.6c0,0-6,1.5-7.4,0.5c-1.4-1.1-1.5-8.8-0.6-9.6C18.3,44.4,24.8,44.8,24.8,44.8z"/>
	<radialGradient id="XMLID_45_" cx="29.9614" cy="29.0073" r="6.019" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_11_" fill="url(#XMLID_45_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M36,28.6L28.7,35c0,0-4.9-3.8-4.9-5.6c0-1.7,6.1-6.6,7.3-6.3C32.4,23.3,36,28.6,36,28.6z"/>
		<radialGradient id="XMLID_46_" cx="50" cy="49.1667" r="26.8776" gradientUnits="userSpaceOnUse">
			<stop  offset="0.3333" style="stop-color:#E3BF4C"/>
			<stop  offset="0.7473" style="stop-color:#F4CE52"/>
			<stop  offset="1" style="stop-color:#F5E16E"/>
		</radialGradient>
	<ellipse id="XMLID_1_" fill="url(#XMLID_46_)" stroke="#58595B" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" cx="50" cy="49.2" rx="27.3" ry="26.5"/>
</g>
</g>
<g id="rain">
	<path class="raindrop" id="drop1" fill="url(#XMLID_17_)" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
		M33.8,67.2c0,0-10.4,14.3,0,14.3C44.4,81.5,33.8,67.2,33.8,67.2z"/>
	<linearGradient id="XMLID_17_" gradientUnits="userSpaceOnUse" x1="43.5804" y1="74.1052" x2="52.9097" y2="74.1052">
		<stop  offset="0.4718" style="stop-color:#5CCAEB"/>
		<stop  offset="0.5339" style="stop-color:#51B1CD"/>
	</linearGradient>
	<path class="raindrop" id="drop2" fill="url(#XMLID_17_)" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
		M48.2,67c0,0-10.4,14.3,0,14.3C58.8,81.3,48.2,67,48.2,67z"/>
	<path class="raindrop" id="drop3" fill="url(#XMLID_17_)" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="0.5" d="
		M62.4,67c0,0-10.4,14.3,0,14.3C73,81.3,62.4,67,62.4,67z"/>
</g>
<g id="bigCloud">
		<path id="XMLID_1_" fill="#F4F4F4" stroke="#515251" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="8.000000e-002" d="
		M22.3,65.5c0,0-8.9-2.9-9.3-12.8s10-11.3,11.4-10.1c0,0,2.5-8.4,10.1-8.6c0,0,3.5-13.4,17.8-13.1c0,0,15.6-0.8,17.9,16.4
		c0,0,12.9-1,13.4,15.1c0,0-1.4,10.9-11.9,13.1c0,0-12,2-13.8-2.3c-0.2,2.1-15,6-19.6,0C33.8,68.4,22.3,65.5,22.3,65.5z"/>
</g>

</svg>
<!-- CHUBBYPARTLY SUN RAIN END -->
<!-- CHUBBYPARTLYSUNTHUNDER-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<!--
<g id="sunRays">
	<radialGradient id="XMLID_4_" cx="51.1566" cy="21.1667" r="4.7267" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_3_" fill="url(#XMLID_4_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M56.1,25.3h-9.7c0,0-1.2-6.1,0-7.4c1.2-1.3,8.9-1,9.7,0C56.8,18.9,56.1,25.3,56.1,25.3z"/>
	<radialGradient id="XMLID_12_" cx="71.2457" cy="29.7708" r="6.0292" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_5_" fill="url(#XMLID_12_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M71.8,35.8l-6.6-7.1c0,0,3.7-5,5.4-5.1s6.8,5.8,6.6,7.1C77.1,32,71.8,35.8,71.8,35.8z"/>
	<radialGradient id="XMLID_13_" cx="79.016" cy="49.1667" r="4.757" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_6_" fill="url(#XMLID_13_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M75.1,54.2l-0.3-9.7c0,0,6.1-1.3,7.4-0.2c1.3,1.1,1.2,8.9,0.3,9.7C81.5,54.8,75.1,54.2,75.1,54.2z"/>
	<radialGradient id="XMLID_14_" cx="70.2457" cy="69.6002" r="6.0234" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_7_" fill="url(#XMLID_14_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M64.3,70.7l6.4-7.2c0,0,5.3,3.2,5.5,4.9c0.2,1.7-5.2,7.3-6.4,7.2C68.5,75.6,64.3,70.7,64.3,70.7z"/>
	
		<radialGradient id="XMLID_15_" cx="50.7987" cy="78.0712" r="4.7789" gradientTransform="matrix(0.998 -6.322496e-002 6.322496e-002 0.998 -4.8396 3.3703)" gradientUnits="userSpaceOnUse">
		<stop  offset="0.3333" style="stop-color:#FBD25A"/>
		<stop  offset="0.7581" style="stop-color:#FAD45D"/>
		<stop  offset="1" style="stop-color:#F5E16E"/>
	</radialGradient>
	
		<path id="XMLID_8_" fill="url(#XMLID_15_)" stroke="#6D6E71" stroke-width="0.5" stroke-miterlimit="10" stroke-opacity="7.000000e-002" d="
		M45.8,74.2l9.7-0.2c0,0,1.3,6.1,0.2,7.4c-1.1,1.3-8.9,1.2-9.7,0.2C45.2,80.6,45.8,74.2,45.8,74.2z"/>
	<radialGradient id="XMLID_16_" cx="30.5864&quo.........完整代码请登录后点击上方下载按钮下载查看

网友评论0