svg+css实现工地吊车作业即将开始动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg+css实现工地吊车作业即将开始动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
   *,*::before,*::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body{height:100%;width:100%}body{padding:50px;margin:0;overflow:hidden;background-color:#FAFAFA}@-webkit-keyframes swinging{0%{-webkit-transform:rotate(10deg)}50%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(10deg)}}@keyframes swinging{0%{transform:rotate(10deg)}50%{transform:rotate(-5deg)}100%{transform:rotate(10deg)}}@-webkit-keyframes sleeping{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes sleeping{0%{opacity:0}50%{opacity:1}100%{opacity:0}}#swinger{-webkit-transform-origin:top center;transform-origin:top center;transform-box:fill-box;-webkit-animation:swinging 3.5s ease-in-out forwards infinite;animation:swinging 3.5s ease-in-out forwards infinite}#zone{opacity:0;-webkit-animation:sleeping 3.5s ease-in-out forwards infinite;animation:sleeping 3.5s ease-in-out forwards infinite}#ztwo{opacity:0;-webkit-animation:sleeping 3.5s ease-in-out forwards infinite;animation:sleeping 3.5s ease-in-out forwards infinite;animation-delay:.4s;-website-animation-delay:.4s}#zthree{opacity:0;-webkit-animation:sleeping 3.5s ease-in-out forwards infinite;animation:sleeping 3.5s ease-in-out forwards infinite;animation-delay:.7s;-website-animation-delay:.7s}#zfour{opacity:0;-webkit-animation:sleeping 3.5s ease-in-out forwards infinite;animation:sleeping 3.5s ease-in-out forwards infinite;animation-delay:1s;-website-animation-delay:1s}#zfive{opacity:0;-webkit-animation:sleeping 3.5s ease-in-out forwards infinite;animation:sleeping 3.5s ease-in-out forwards infinite;animation-delay:1.3s;-website-animation-delay:1.3s}.container{text-align:center}svg{max-width:1000px}
</style>
</head>

<body>

    <div class="container"><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 1536.2 755.1" style="enable-background:new 0 0 1536.2 755.1;" xml:space="preserve"><style type="text/css">.st0{fill:#E6E7E8}.st1{fill:#D1D3D4}.st2{fill:#F4F4F4}.st3{fill:#BCBEC0}.st4{fill:#231F20}.st5{fill:#FFF}.st6{fill:#D36866}.st7{fill:#C2C4C6}.st8{fill:#DBDBDB}.st9{fill:#A7A9AC}.st10{fill:#808285}</style><rect x="96.7" y="27.1" class="st0" width="157.4" height="471.6" /><rect x="458.3" class="st0" width="157.4" height="471.6" /><polygon class="st1" points="489.6,475.3 219.3,475.3 219.3,72.3 216,68.8 216,51.3 464,51.3 489.6,90.7 " /><path class="st2" d="M1482.2,755.1H54c-36.8,0-62.8-36.1-51.2-71l36.3-108.5h1458l36.3,108.5C1545,719,1519,755.1,1482.2,755.1z" /><g><g><g><g><polygon class="st1" points="95.8,582.5 77.8,582.5 77.8,452.9 86.8,438.5 95.8,452.9 				" /><path class="st3" d="M84.4,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C86.5,552.3,84.5,582.1,84.4,583.4z" /><path class="st3" d="M89.5,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C90.6,499.1,92.5,546.6,89.5,583.4z" /><path class="st4" d="M98.3,585h-23V452.2l11.5-18.4l11.5,18.4V585z M80.3,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="114.3,582.5 96.3,582.5 96.3,452.9 105.3,438.5 114.3,452.9 				" /><path class="st3" d="M102.9,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C105,552.3,103,582.1,102.9,583.4z" /><path class="st3" d="M108,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.4c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C109.1,499.1,111,546.6,108,583.4z" /><path class="st4" d="M116.8,585h-23V452.2l11.5-18.4l11.5,18.4V585z M98.8,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="132.8,582.5 114.8,582.5 114.8,452.9 123.8,438.5 132.8,452.9 				" /><path class="st3" d="M121.4,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C123.5,552.3,121.5,582.1,121.4,583.4z" /><path class="st3" d="M126.5,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C127.6,499.1,129.6,546.6,126.5,583.4z" /><path class="st4" d="M135.3,585h-23V452.2l11.5-18.4l11.5,18.4V585z M117.3,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="151.3,582.5 133.3,582.5 133.3,452.9 142.3,438.5 151.3,452.9 				" /><path class="st3" d="M139.9,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C142.1,552.3,140,582.1,139.9,583.4z" /><path class="st3" d="M145,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C146.1,499.1,148.1,546.6,145,583.4z" /><path class="st4" d="M153.8,585h-23V452.2l11.5-18.4l11.5,18.4V585z M135.8,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="169.3,582.5 151.3,582.5 151.3,452.9 160.3,438.5 169.3,452.9 				" /><path class="st3" d="M157.9,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C160.1,552.3,158,582.1,157.9,583.4z" /><path class="st3" d="M163,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C164.1,499.1,166.1,546.6,163,583.4z" /><path class="st4" d="M171.8,585h-23V452.2l11.5-18.4l11.5,18.4V585z M153.8,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="187.8,582.5 169.8,582.5 169.8,452.9 178.8,438.5 187.8,452.9 				" /><path class="st3" d="M176.4,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C178.6,552.3,176.5,582.1,176.4,583.4z" /><path class="st3" d="M181.5,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C182.7,499.1,184.6,546.6,181.5,583.4z" /><path class="st4" d="M190.3,585h-23V452.2l11.5-18.4l11.5,18.4V585z M172.3,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="206.3,582.5 188.3,582.5 188.3,452.9 197.3,438.5 206.3,452.9 				" /><path class="st3" d="M194.9,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C197.1,552.3,195,582.1,194.9,583.4z" /><path class="st3" d="M200,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C201.2,499.1,203.1,546.6,200,583.4z" /><path class="st4" d="M208.8,585h-23V452.2l11.5-18.4l11.5,18.4V585z M190.8,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="224.8,582.5 206.8,582.5 206.8,452.9 215.8,438.5 224.8,452.9 				" /><path class="st3" d="M213.5,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C215.6,552.3,213.5,582.1,213.5,583.4z" /><path class="st3" d="M218.5,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.4c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C219.7,499.1,221.6,546.6,218.5,583.4z" /><path class="st4" d="M227.3,585h-23V452.2l11.5-18.4l11.5,18.4V585z M209.3,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g></g><g><g><polygon class="st1" points="243.1,582.5 225.1,582.5 225.1,452.9 234.1,438.5 243.1,452.9 				" /><path class="st3" d="M231.8,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C233.9,552.3,231.8,582.1,231.8,583.4z" /><path class="st3" d="M236.8,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C238,499.1,239.9,546.6,236.8,583.4z" /><path class="st4" d="M245.6,585h-23V452.2l11.5-18.4l11.5,18.4V585z M227.6,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="261.6,582.5 243.6,582.5 243.6,452.9 252.6,438.5 261.6,452.9 				" /><path class="st3" d="M250.3,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C252.4,552.3,250.3,582.1,250.3,583.4z" /><path class="st3" d="M255.3,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C256.5,499.1,258.4,546.6,255.3,583.4z" /><path class="st4" d="M264.1,585h-23V452.2l11.5-18.4l11.5,18.4V585z M246.1,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="280.1,582.5 262.1,582.5 262.1,452.9 271.1,438.5 280.1,452.9 				" /><path class="st3" d="M268.8,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C270.9,552.3,268.9,582.1,268.8,583.4z" /><path class="st3" d="M273.8,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C275,499.1,276.9,546.6,273.8,583.4z" /><path class="st4" d="M282.6,585h-23V452.2l11.5-18.4l11.5,18.4V585z M264.6,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="298.6,582.5 280.6,582.5 280.6,452.9 289.6,438.5 298.6,452.9 				" /><path class="st3" d="M287.3,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C289.4,552.3,287.4,582.1,287.3,583.4z" /><path class="st3" d="M292.3,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.4c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C293.5,499.1,295.4,546.6,292.3,583.4z" /><path class="st4" d="M301.1,585h-23V452.2l11.5-18.4l11.5,18.4V585z M283.1,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="316.6,582.5 298.6,582.5 298.6,452.9 307.6,438.5 316.6,452.9 				" /><path class="st3" d="M305.3,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C307.4,552.3,305.4,582.1,305.3,583.4z" /><path class="st3" d="M310.3,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.4c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C311.5,499.1,313.4,546.6,310.3,583.4z" /><path class="st4" d="M319.1,585h-23V452.2l11.5-18.4l11.5,18.4V585z M301.1,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="335.1,582.5 317.1,582.5 317.1,452.9 326.1,438.5 335.1,452.9 				" /><path class="st3" d="M323.8,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C325.9,552.3,323.9,582.1,323.8,583.4z" /><path class="st3" d="M328.8,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C330,499.1,331.9,546.6,328.8,583.4z" /><path class="st4" d="M337.6,585h-23V452.2l11.5-18.4l11.5,18.4V585z M319.6,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="353.6,582.5 335.6,582.5 335.6,452.9 344.6,438.5 353.6,452.9 				" /><path class="st3" d="M342.3,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C344.4,552.3,342.4,582.1,342.3,583.4z" /><path class="st3" d="M347.3,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C348.5,499.1,350.4,546.6,347.3,583.4z" /><path class="st4" d="M356.1,585h-23V452.2l11.5-18.4l11.5,18.4V585z M338.1,580h13V453.6l-6.5-10.4l-6.5,10.4V580z" /></g><g><polygon class="st1" points="372.1,582.5 354.1,582.5 354.1,452.9 363.1,438.5 372.1,452.9 				" /><path class="st3" d="M360.8,583.4l-1-0.1c0-0.3,2.1-31,0.7-40.1c-1.4-9.2-0.7-21.2-0.1-23.6c0.4-1.6,2.1-63.2,0.7-77.7l1-0.1
					c1.2,13-0.1,75.6-0.7,78.1c-0.6,2.1-1.3,14.1,0.1,23.2C362.9,552.3,360.9,582.1,360.8,583.4z" /><path class="st3" d="M365.8,583.4l-1-0.1c3.1-36.8,1.2-84.2,0.3-104.5c-0.1-3.3-0.2-6-0.3-7.7c-0.4-12.6,1.4-27.8,1.4-28l1,0.1
					c0,0.2-1.7,15.3-1.4,27.8c0.1,1.8,0.2,4.4,0.3,7.7C367,499.1,368.9,546.6,365.8,583.4z" /><path class="st4" d="M374.6,585h-23V452.2l11.5-18.4l11.5,18.........完整代码请登录后点击上方下载按钮下载查看