svg天气预报动画图标合集效果代码
代码语言：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>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0