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 594.6,408.9 599.6,370.3 "/>
</g>
<g id="factory">
<polygon fill="#BA5543" points="347.3,207.5 347.4,285.4 396.2,286.2 396.2,200.4 394,200.3 371,161 "/>
<polygon fill="#89786E" points="363.8,147.5 394.3,198.4 557.7,202.8 525.4,154.9 "/>
<polygon fill="#672D2E" points="395.8,200.6 395.8,286.4 418.8,287 418.8,282.6 460.5,284.5 539.1,284.8 539.1,287.9 547.5,287.9
546.9,205.3 "/>
<polygon fill="#653647" points="370.7,161.1 347.4,206.8 346.8,199 367.9,156.2 "/>
<polygon fill="#653647" points="363.4,147.4 336.7,202.4 338.7,205.2 365.4,150.5 "/>
<polygon fill="#46141D" points="346.9,205.5 338.8,205.6 365.1,151.4 367.9,156.2 346.8,199 "/>
<polygon fill="#787978" points="341.5,192 329.4,191.6 336.7,202.4 "/>
<polygon fill="#2C333B" points="338.8,205.6 347.3,218.1 347.3,205.6 "/>
<polygon fill="#D9906C" points="329.4,191.6 311.3,222.6 312.4,222.7 329.3,193.7 344.4,217.3 344.4,214 "/>
<polygon fill="#943B3D" points="315.8,222.8 312.2,222.7 329,193.7 330.7,196.4 "/>
<polygon fill="#6E4830" points="344.4,217.3 347.2,221.4 347.3,218.1 344.4,214 "/>
<polygon fill="#D8755B" points="310.5,223 310.6,225.8 314.5,225.9 314.5,223 "/>
<polygon fill="#672D2E" points="316,222.8 316,227.6 314.5,225.9 314.5,223 "/>
<polygon fill="#AD5A60" points="310.6,225.8 313,227.8 316.3,228.1 314.5,225.9 "/>
<polygon fill="#563133" points="346.4,221 344.4,220.9 344.4,223.4 345.9,226.2 347.2,226.4 347.2,221.9 "/>
<polygon fill="#D89D7D" points="345.1,226.4 312.5,228 305.5,232.1 305.6,243.3 "/>
<polygon fill="#657778" points="347.2,226.4 345.5,226.4 305.6,243.3 305.9,249.7 "/>
<polygon fill="#D38E51" points="286.2,104.6 279.6,106.8 285,106.1 "/>
<polygon fill="#8D5340" points="278.7,109.2 278.7,111.7 280.3,114.2 285.2,113.3 284.6,110.2 285,106.1 279.6,106.8 "/>
<polygon fill="#465343" points="292.1,104.3 286.2,104.6 285,106.1 296.4,106.7 "/>
<polygon fill="#0F2121" points="284.7,111.5 296.8,111.3 296.7,108.3 284.8,107.9 "/>
<polygon fill="#0F2121" points="296.8,111.3 295.7,113.4 285.2,113.3 284.7,111.5 "/>
<polygon fill="#2C333B" points="296.4,106.7 297.1,108.2 284.8,107.9 285,106.1 "/>
<polygon fill="#2C333B" points="285.2,113.3 285.2,115.6 295.8,115.8 295.7,113.4 "/>
<polygon fill="#653647" points="284.7,111.2 278.7,111.7 280.3,114.2 285.6,113.5 "/>
<polygon fill="#B77766" points="284.8,107.9 278.7,109.2 279.6,106.8 285,106.1 "/>
<polygon fill="#D8755B" points="280.3,114.2 280.3,116.3 285.3,116.1 285.2,113.3 "/>
<polygon fill="#943B3D" points="279.8,116.4 280.2,118.1 285.2,118 285.3,116.1 "/>
<polygon fill="#2A2725" points="295.8,115.8 285.3,116.1 285.2,118 295.9,117.8 296.5,116.3 "/>
<polygon fill="#C96631" points="280.2,118.1 277.1,222.4 284.1,221.4 285.2,118 "/>
<polygon fill="#563133" points="295.9,117.8 298.4,220.2 284.1,221.4 285.2,118 "/>
<polygon fill="#562122" points="298.8,222.4 305.2,228.5 305.8,274.6 270.9,274.1 271,242.7 271,241.9 "/>
<polygon fill="#040805" points="306.9,227.6 305.2,228.5 298.8,222.4 271.3,241.7 270.2,240.5 298.4,220.2 "/>
<polygon fill="#BA8659" points="259.4,223.3 298.4,220.2 270.2,240.5 231.9,243.6 "/>
<polygon fill="#99381B" points="231.8,243.9 231.8,245.6 232.6,245.5 232.6,274.3 235.2,274.3 234.7,253.4 236.5,252.1
238.1,252.2 240,253.4 240.4,274.6 247.6,274.9 247.2,269.8 242.4,269.9 241.9,252.4 243.8,251.6 245,251.6 246.7,252.7
247.4,253.3 247.6,242.4 "/>
<polygon fill="#260C05" points="237,274.2 235.2,274.3 234.7,253.4 236.5,252.1 237.7,252.1 240,253.4 238,253.6 236.6,254.9 "/>
<polygon fill="#441009" points="243.5,270 243.6,253.4 244.3,252.7 246.1,252.8 245,251.6 243.4,251.8 241.9,252.4 242.4,269.9
"/>
<polygon fill="#A45628" points="240,253.4 240.4,274.6 237,274.2 236.6,254.9 238.2,253.4 "/>
<polygon fill="#C24623" points="247.4,253.3 246.7,252.7 244.3,252.7 243.6,253.4 243.5,270 247.6,269.8 "/>
<polygon fill="#CF8238" points="247.6,242.4 260,241.5 259.8,287 258.1,286.4 255.3,288.1 253.2,286.8 251.1,286.8 247.7,283
247.4,277.6 245.8,275 247.6,274.9 "/>
<polygon fill="#DBA05C" points="270.1,240.8 260,241.5 259.8,287 262.6,288 262.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