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-miterli.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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