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,289.6 266.2,289.5 267.6,287.3 269.2,288.4
268.9,290.5 272.3,289.1 274.6,289.6 275.9,287.4 275.4,282.6 274.7,282.2 274.4,276.3 273.8,275.9 273.9,274 270.9,274.1
271,241.9 "/>
<polygon fill="#563133" points="272.8,253.3 272.6,273.9 277.9,274.1 278.6,253.4 "/>
<polygon fill="#443233" points="279.8,253.4 280,274.1 277.9,274.1 278.6,253.4 "/>
<polygon fill="#443233" points="291.6,274.2 291.6,267.6 295.2,267.6 295.6,274.5 "/>
<polygon fill="#452531" points="305.8,274.6 310.2,274.5 334.5,274.7 347.1,277.2 347.2,226.4 305.9,249.7 "/>
<polygon fill="#533244" points="284.3,235.2 284.5,237.6 296.7,238 296.9,235.2 294.6,234.3 289,233.8 "/>
<polygon fill="#2C333B" points="285.2,244.7 295.6,245.2 295.3,237.9 285.1,237.7 "/>
<polygon fill="#452531" points="297,245.3 296.7,238 295.3,237.9 295.6,245.2 "/>
<polygon fill="#441009" points="232.6,274.3 235.2,274.3 237,274.2 240.4,274.6 245.8,275 247.4,277.6 247.7,283 251.1,286.8
247.6,287.3 246.9,286.2 241.4,285.7 238.6,287.3 238.6,288.7 236.6,288.4 235.2,289.6 231.6,289.3 228.5,288.5 224,285.6
223.9,273.6 226.5,273.3 227.3,275 "/>
<path fill="#533244" d="M316,274.9l-0.6-17.7c0,0-0.3-9.9,8.9-10.1c9.2-0.2,10.3,9.3,10.3,9.3v18.3L316,274.9z"/>
<path fill="#0F2121" d="M316.5,247.5l7.8-0.5c0,0-7.9,0-8.9,10.1l0.6,17.7l-5.7-0.3l-0.5-18.3C309.8,256.2,309.5,249.7,316.5,247.5
z"/>
<polygon fill="#F7F0ED" points="367.9,175 367.7,190.5 363.1,190.8 362.8,175.6 "/>
<polygon fill="#787978" points="363.4,176.5 363.5,182.3 366.8,182.1 366.6,176.5 "/>
<polygon fill="#2C333B" points="363.7,183.5 366.6,183.2 366.6,188.9 363.8,189.1 "/>
<polygon fill="#F7F0ED" points="374.3,174.2 378,174 379.1,175.3 378.9,189.6 374.3,189.9 "/>
<polygon fill="#786967" points="375,175.4 377.7,175 377.7,180.7 375.3,181 "/>
<polygon fill="#0F2121" points="375.2,182.4 378,182.1 378.1,188.2 374.9,188.5 "/>
<polygon fill="#FFFFF6" points="354.1,205.9 358.7,205.9 358.9,222.3 353.9,222.3 "/>
<polygon fill="#9BA68A" points="354.7,207.9 357.5,207.6 357.6,213.8 355.1,213.5 "/>
<polygon fill="#89786E" points="355,214.9 357.6,214.7 357.5,220.3 354.7,220.3 "/>
<polygon fill="#FFFFFF" points="368.2,204.6 372.9,204.6 373,221.3 367.9,221.3 "/>
<polygon fill="#2F3D36" points="369,206.7 372.2,206.2 372.2,212.6 369,212.7 "/>
<polygon fill="#4D442F" points="369,213.6 372.2,213.5 371.9,219.2 368.5,219.2 "/>
<polygon fill="#F7F7EF" points="367.9,264.6 372.7,264.6 373,280.1 368.2,280 "/>
<polygon fill="#271E12" points="368.9,265.6 369,271.9 371.9,271.6 371.9,265.7 "/>
<polygon fill="#443233" points="368.8,272.8 371.9,272.8 371.8,278.9 369,278.7 "/>
<polygon fill="#A45628" points="383.7,283.9 383.7,265.5 389.3,265.8 389.7,284.4 "/>
<polygon fill="#441009" points="382.5,283.9 383.7,283.9 383.7,265.5 389.3,265.8 389,265.1 382.2,264.9 "/>
<polygon fill="#562731" points="395.7,284.2 394.1,284.3 394.1,286.8 395.8,286.4 "/>
<path fill="#99381B" d="M357,283.7l37.1,0.6v2.5c-1.9-0.3-37.3-0.9-37.3-0.9L357,283.7z"/>
<polygon fill="#562731" points="347.2,257.5 353.1,258.9 357.8,283.6 357,283.7 356.9,285.9 347.1,285.6 "/>
<polygon fill="#749289" points="532.4,164.7 525.8,155 363.8,147.5 370.2,158.1 "/>
<polygon fill="#DCD7AA" points="396.1,170 403.1,170.5 410,181.7 402.6,181.2 "/>
<polygon fill="#E9DCCD" points="412.6,171 418.3,180.7 425.1,180.7 419.4,170.9 "/>
<polygon fill="#EDD3B3" points="486.3,174.2 492.8,184.3 499.3,184.4 493.1,173.9 "/>
<polygon fill="#4D442F" points="557.7,202.8 557.1,204.9 393.7,200.4 394.3,198.4 "/>
<polygon fill="#434442" points="578.6,228.6 546.5,228.2 546.9,205.3 557.1,204.9 557.7,202.8 559.3,201.8 "/>
<polygon fill="#584443" points="555.2,186.9 555.6,199 557.7,201.9 558.4,186.2 "/>
<polygon fill="#E8AC5C" points="548.1,186.3 548.7,190 555.6,199 555.2,186.9 "/>
<polygon fill="#2F111B" points="547.2,231 576.1,231 578.6,228.6 546.5,228.2 "/>
<path fill="#6A514E" d="M556.8,246.9v18h8.1l-0.3-17.7C564.6,247.2,561.5,243.5,556.8,246.9z"/>
<polygon fill="#8C9468" points="558,247.8 563,247.8 563.6,263 558.7,263.4 558.3,255.3 "/>
<polygon fill="#441009" points=&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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