svg+css实现工厂烟囱冒烟动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+css实现工厂烟囱冒烟动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
background-color:#8D9B91;
margin:0;
padding:0;
}
svg{
display:block;
margin:0 auto;
width:700px;
animation: floating 5s linear 2s infinite;
}
@keyframes floating{
0%{transform:translateY(0px)}
50%{transform:translateY(20px)}
100%{transform:translateY(0px)}
}
#steam1{ animation: puff 2s linear infinite;}
@keyframes puff{
0%{opacity:0; y:0}
50%{opacity:1; transform:translateX(-30px)}
100%{opacity:0; transform:translateX(-50px) }
}
#steam2{ animation: puffpuff 2.5s linear 1s infinite;}
@keyframes puffpuff{
0%{opacity:0; y:0}
50%{opacity:1; transform:translateX(-30px)}
100%{opacity:0; transform:translateX(-50px) }
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 800 550">
<g id="bg">
<polygon fill="#A2AD3A" points="237.9,279.6 193.2,294.5 183.2,304.5 196.9,343 231.7,402.7 328.6,349.2 462.2,356.7 565.8,350.9
623,341.8 614.5,287.1 528.7,278.4 "/>
<polygon fill="#995526" points="196.3,343.4 328.6,349.2 462.2,356.7 565.8,350.9 623,341.8 594.6,408.9 556.1,416.3 542.4,469.8
511.3,483.4 480.3,524.5 426.8,523.2 406.9,538.1 346,505.8 322.4,489.7 291.3,493.4 273.9,447.4 231.9,404.7 "/>
</g>
<g id="ground">
<polygon fill="#677F2E" points="226.1,282.9 192.1,294.5 224.4,319.4 327.4,332.6 481.9,333.5 552.6,323.5 604.8,309.4 613,286.2
571.6,281.3 "/>
<polygon fill="#798E3F" points="192.1,294.5 183,305.3 196.3,343.4 224.4,319.4 "/>
<polygon fill="#99B533" points="328,329.3 196.3,343.4 224.4,319.4 "/>
<polygon fill="#748727" points="482.1,331 462.2,356.7 327.2,350.9 328,329.3 "/>
<path fill="#84932C" d="M196.3,343.4L328,329.3c0,0,1.7,21.5-0.8,21.5C324.7,350.9,196.3,343.4,196.3,343.4z"/>
<polygon fill="#6F7722" points="613,286.2 623,341.8 604.8,309.4 "/>
<polygon fill="#858930" points="462.2,356.7 565.8,350.9 552.6,323.5 482.1,331 "/>
<polygon fill="#919630" points="623,341.8 565.8,350.9 552.6,323.5 604.8,309.4 "/>
<polygon fill="#471D13" points="196.3,343.4 231.9,404.7 232.7,345.1 "/>
<polygon fill="#703616" points="327.2,350.9 231.9,404.7 232.7,345.1 "/>
<polygon fill="#703910" points="462.2,356.7 435.5,385.3 352.9,384.8 327.2,350.9 "/>
<polygon fill="#491D0C" points="231.9,404.7 279.1,423 328.8,423.8 352.9,384.8 327.2,350.9 "/>
<polygon fill="#662B1B" points="435.5,385.3 454.2,418.8 462.2,356.7 "/>
<polygon fill="#4C230F" points="565.8,350.9 454.2,418.8 462.2,356.7 "/>
<polygon fill="#68331E" points="623,341.8 599.6,370.3 532.5,370.3 565.8,350.9 "/>
<polygon fill="#60330B" points="352.9,384.8 328.8,423.8 359.7,452.4 436.8,385.3 "/>
<polygon fill="#703910" points="279.1,423 359.7,452.4 328.8,423.8 "/>
<polygon fill="#844A23" points="454.2,418.8 359.7,452.4 436.8,385.3 "/>
<polygon fill="#995526" points="532.5,370.3 557.3,417.6 454.2,418.8 "/>
<polygon fill="#844318" points="599.6,370.3 557.3,417.6 532.5,370.3 "/>
<polygon fill="#703616" points="359.7,452.4 428.1,473.5 454.2,418.8 "/>
<polygon fill="#703616" points="557.3,417.6 428.1,473.5 454.2,418.8 "/>
<polygon fill="#703616" points="231.9,404.7 273.9,447.4 298.8,471 279.1,423 "/>
<polygon fill="#4C230F" points="359.7,452.4 348.5,477.2 298.8,471 279.1,423 "/>
<polygon fill="#4C230F" points="557.3,417.6 543.6,469.8 484,447.4 "/>
<polygon fill="#68331E" points="428.1,473.5 447.9,510.8 543.6,469.8 484,447.4 "/>
<polygon fill="#68331E" points="348.5,477.2 346,505.8 322.4,489.7 301.7,471.3 "/>
<polygon fill="#7F3D26" points="428.1,473.5 348.5,477.2 359.7,452.4 "/>
<polygon fill="#4C230F" points="447.9,510.8 406.9,538.1 346,505.8 348.5,477.2 428.1,473.5 "/>
<polygon fill="#471D13" points="273.9,447.4 291.3,493.4 322.4,489.7 "/>
<polygon fill="#471D13" points="428,523.5 480.3,524.5 511.3,483.4 447.9,510.8 "/>
<polygon fill="#703616" points="623,341.8 594.6,408.9 599.6,370.3 "/>
<polygon fill="#4C230F" points="557.3,417.6 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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