svg实现一个暴利发财小岛效果代码
代码语言:html
所属分类:动画
代码描述:svg实现一个暴利发财小岛效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; margin: 0; } svg { max-height: 100%; } #front_ripple01, #back_ripple01 { transform-origin: 685.796px 443.26px; animation-delay: 0s; } #front_ripple02, #back_ripple02 { transform-origin: 685.796px 443.26px; animation-delay: -2.5s; } #front_ripple03, #back_ripple03 { transform-origin: 685.796px 443.26px; animation-delay: -5s; } #front_ripple04, #back_ripple04 { transform-origin: 685.796px 443.26px; animation-delay: -7.5s; } #front_ripple01, #back_ripple01, #front_ripple02, #back_ripple02, #front_ripple03, #back_ripple03, #front_ripple04, #back_ripple04 { animation-name: waves; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite; } #light { transform-origin: 838.542px 127.164px; animation-name: lighthouse; animation-duration: 10s; animation-time-function: ease-in-out; animation-iteration-count: infinite; } #windmill { transform-origin: 838.542px 196.936px; animation-name: windmill-spin; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; } #clouds { transform-origin:704.088px 303.392px; animation-name: sun-peak; animation-duration: 15s; animation-time-function: ease-in-out; animation-iteration-count: infinite; } #sun { transform-origin:496.94px 189.719px; animation-name: sun-fade; animation-duration: 15s; animation-time-function: ease-in-out; animation-iteration-count: infinite; } #boat { transform-origin:509.154px 397.683px; animation-name: boat-bob; animation-duration: 7s; animation-time-function: ease-in-out; animation-iteration-count: infinite; } #wind01 { stroke-dasharray: 310px; stroke-dashoffset: 310px; animation-name: draw-wind01; animation-duration: 6s; animation-delay: 2s; animation-time-function: linear; animation-iteration-count: infinite; } #wind02 { stroke-dasharray: 220px; stroke-dashoffset: 220px; animation-name: draw-wind02; animation-duration: 6s; animation-time-function: linear; animation-iteration-count: infinite; } #wind03 { stroke-dasharray: 220px; stroke-dashoffset: 220px; animation-name: draw-wind03; animation-duration: 6s; animation-delay: 4s; animation-time-function: linear; animation-iteration-count: infinite; } @keyframes waves { 0%{ transform: scale(1); opacity: 0; } 25%{ opacity: 1; } 100%{ transform: scale(2); opacity: 0; } } @keyframes lighthouse { 0% { transform: scale(1); } 45% { transform: scale(2); } 55% { transform: scale(2); } 100% { transform: scale(1); } } @keyframes windmill-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes sun-peak { 0% { transform: translate(10px, 10px); } 40% { transform: translate(-30px, -30px); } 60% { transform: translate(-30px, -30px); } 100% { transform: translate(10px, 10px); } } @keyframes sun-fade { 0% { opacity: 1; } 40% { opacity: 0.5; } 60% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes boat-bob { 0% { transform: rotate(0deg) translate(0px, 0px); } 25% { transform: rotate(2deg) translate(0px, -3px); } 50% { transform: rotate(0deg) translate(0px, 0px); } 75% { transform: rotate(2deg) translate(0px, -3px); } 100% { transform: rotate(0deg) translate(0px, 0px); } } @keyframes draw-wind01 { 0% { stroke-dashoffset: 310px; } 50% { stroke-dashoffset: -310px; } 100%{ stroke-dashoffset: -310px; } } @keyframes draw-wind02 { 0% { stroke-dashoffset: 220px; } 50% { stroke-dashoffset: -220px; } 100%{ stroke-dashoffset: -220px; } } @keyframes draw-wind03 { 0% { stroke-dashoffset: 220px; } 50% { stroke-dashoffset: -220px; } 100%{ stroke-dashoffset: -220px; } } </style> </head> <body> <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="windfall_island" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFF2CF;} .st1{fill:#E0FFFF;} .st2{fill:#FFFFFF;} .st3{fill:none;stroke:#85FFFF;stroke-width:4;stroke-miterlimit:10;} .st4{fill:#FFE69F;} .st5{fill:#FFCD40;} .st6{fill:#FE857A;} .st7{fill:#FE5C4E;} .st8{fill:#FEADA6;} .st9{fill:none;stroke:#FE5C4E;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st10{fill:#827B9A;} .st11{fill:#D5D3DD;} .st12{fill:#594F78;} .st13{fill:#ACA7BB;} .st14{opacity:0.25;fill:#85FFFF;} .st15{fill:#FFD6D3;} .st16{fill:none;stroke:#594F78;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st17{fill:none;stroke:#594F78;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st18{fill:none;stroke:#85FFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st19{fill:#85FFFF;} .st20{opacity:0.5;} .st21{fill:#D5F1E2;} .st22{fill:#ACE3C5;} .st23{fill:#82D6A8;} .st24{fill:#59C88B;} .st25{fill:none;stroke:#594F78;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st26{fill:none;stroke:#59C88B;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} .st27{fill:#C2FFFF;} .st28{fill:none;stroke:#85FFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} </style> <circle id="sun" class="st0" cx="496.94" cy="189.72" r="96.87"/> <g id="clouds"> <path class="st1" d="M967.14,463.09c50.32,0,91.26-40.94,91.26-91.26s-40.94-91.26-91.26-91.26c-5.44,0-10.82,0.48-16.1,1.42 c-7.61-18.58-23.39-32.97-42.83-38.72c-14.55-39.68-52.42-66.9-96.09-66.9c-20.17,0-39.81,6.02-56.43,16.98 c-5.85-3.47-12.21-6.05-18.86-7.62c-7.53-24.33-30.23-42.05-57-42.05c-24.8,0-46.11,15.21-55.1,36.79 c-15.22-19.45-38.83-31.43-64.45-31.43c-26.63,0-50.83,12.63-65.97,33.37c-1.93-0.11-3.85-0.17-5.78-0.17 c-26.17,0-51.28,10.64-69.55,28.99c-38.4,1.48-69.18,33.18-69.18,71.93c0,28.18,16.47,53.09,40.73,64.83v115.09H967.14z"/> <path class="st2" d="M983.66,268.81c0-24.58-19.93-44.5-44.5-44.5c-2.63,0-5.2,0.24-7.7,0.68c-12.61-17.09-32.88-28.18-55.75-28.18 c-6.29,0-12.37,0.85-18.16,2.42c-7.91-19.9-27.32-33.98-50.04-33.98c-23.5,0-43.47,15.06-50.82,36.06 c-6.23-2.52-13.03-3.91-20.15-3.91c-3.53,0-6.99,0.35-10.33,1c0.3-1.77,0.46-3.59,0.46-5.45c0-18.11-14.68-32.78-32.78-32.78 s-32.78,14.68-32.78,32.78c0,2.14,0.21,4.22,0.6,6.25c-2.45-0.48-4.99-0.74-7.58-0.74c-13.19,0-24.86,6.49-32.01,16.44 c-13.42-14.54-32.63-23.66-53.98-23.66c-36.33,0-66.47,26.39-72.37,61.03c-0.35-0.01-0.71-0.03-1.06-0.03 c-21.76,0-39.4,17.64-39.4,39.4c0,3.38,0.43,6.67,1.23,9.8c-10.15-7.04-22.46-11.17-35.75-11.17c-34.69,0-62.82,28.13-62.82,62.82 c0,34.69,28.13,62.82,62.82,62.82h524.16V312.93C966.79,310.08,983.66,291.42,983.66,268.81z"/> </g> <path id="back_ripple01" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/> <path id="back_ripple02" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/> <path id="back_ripple03" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/> <path id="back_ripple04" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/> <g id="light"> <circle id="outer" class="st0" cx="838.54" cy="127.16" r="17.56"/> <circle id="middle" class="st4" cx="838.54" cy="127.16" r="12.96"/> <circle id="inner" class="st5" cx="838.54" cy="127.16" r="7.32"/> </g> <g id="buildings_behind"> <g> <g> <polygon class="st6" points="1171.57,331.54 1169.14,256.1 1132.71,248.88 1096.28,256.1 1093.84,331.54 1132.71,334.97 "/> <polygon class="st7" points="1132.71,334.97 1171.57,331.54 1169.14,256.1 1132.71,248.88 "/> <polygon class="st8" points="1168.14,328.05 1165.93,259.26 1132.71,252.68 1099.49,259.26 1097.27,328.05 1132.71,331.17 "/> <polygon class="st6" points="1132.71,331.17 1168.14,328.05 1165.93,259.26 1132.71,252.68 "/> <g> <line class="st9" x1="1105.27" y1="291.53" x2="1105.27" y2="254.32"/> <line class="st9" x1="1126.99" y1="262.38" x2="1126.99" y2="249.74"/> <line class="st9" x1="1144.14" y1="274.96" x2="1144.14" y2="250.95"/> <line class="st9" x1="1110.42" y1="277.24" x2="1110.42" y2="253.24"/> <line class="st9" x1="1159.57" y1="284.1" x2="1159.57" y2="254.38"/> </g> </g> <g> <polygon class="st10" points="1132.71,248.88 1169.14,256.1 1176.15,251.29 1162.13,230.85 1150.92,223.64 1132.71,186.37 1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 "/> <polygon class="st11" points="1132.71,186.37 1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 1132.71,248.88 "/> <path class="st12" d="M1132.71,242.77c0,0-41.69,8.26-43.34,8.58l6.91,4.74l36.43-7.21l36.43,7.21l6.91-4.74L1132.71,242.77z"/> <path class="st10" d="M1132.71,242.77c0,0-41.69,8.26-43.34,8.58l6.91,4.74l36.43-7.21V242.77z"/> <path class="st13" d="M1143,229.81c0-5.05-4.61-9.14-10.29-9.14s-10.29,4.09-10.29,9.14H1143z"/> <path class="st12" d="M1142.41,229.81c0-3.79-4.34-6.86-9.7-6.86s-9.7,3.07-9.7,6.86H1142.41z"/> <polygon class="st14" points="1132.71,186.37 1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 1132.71,248.88 "/> </g> </g> <g> <g> <polygon class="st6" points="1134.54,376.91 1131.02,267.85 1078.36,257.43 1025.7,267.85 1022.18,376.91 1078.36,381.87 "/> <polygon class="st7" points="1078.36,381.87 1134.54,376.91 1131.02,267.85 1078.36,257.43 "/> <polygon class="st8" points="1129.58,371.86 1126.37,272.42 1078.36,262.92 1030.34,272.42 1027.14,371.86 1078.36,376.38 "/> <polygon class="st6" points="1078.36,376.38 1129.58,371.86 1126.37,272.42 1078.36,262.92 "/> <g> <line class="st9" x1="1038.7" y1="319.08" x2="1038.7" y2="265.28"/> <line class="st9" x1="1070.1" y1="276.94" x2="1070.1" y2="258.67"/> <line class="st9" x1="1094.88" y1="295.12" x2="1094.88" y2="260.42"/> <line class="st9" x1="1046.14" y1="298.42" x2="1046.14" y2="263.72"/> <line class="st9" x1="1117.19" y1="308.34" x2="1117.19" y2="265.38"/> </g> </g> <g> <polygon class="st10" points="1078.36,257.43 1131.02,267.85 1141.15,260.9 1120.89,231.36 1104.69,220.93 1078.36,167.06 1052.03,220.93 1035.83,231.36 1015.57,260.9 1025.7,267.85 "/> <polygon class="st11" points="1078.36,167.06 1052.03,220.93 1035.83,231.36 1015.57,260.9 1025.7,267.85 1078.36,257.43 "/> <path class="st12" d="M1078.36,248.6c0,0-60.27,11.93-62.65,12.4l9.99,6.85l52.66-10.43l52.66,10.43l9.99-6.85L1078.36,248.6z"/> <path class="st10" d="M1078.36,248.6c0,0-60.27,11.93-62.65,12.4l9.99,6.85l52.66-10.43V248.6z"/> <path class="st13" d="M1093.23,229.85c0-7.3-6.66-13.22-14.87-13.22s-14.87,5.92-14.87,13.22H1093.23z"/> <path class="st12" d="M1092.38,229.85c0-5.48-6.28-9.91-14.02-9.91s-14.02,4.44-14.02,9.91H1092.38z"/> <polygon class="st14" points="1078.36,167.06 1052.03,220.93 1035.83,231.36 1015.57,260.9 1025.7,267.85 1078.36,257.43 "/> </g> </g> <g> <path class="st15" d="M1033.06,304.58v-20.19c0-7.01,5.7-12.71,12.71-12.71c7.01,0,12.71,5.7,12.71,12.71v20.19H1033.06z"/> <path class="st12" d="M1036.05,304.58h19.44V284.4c0-5.37-4.35-9.72-9.72-9.72l0,0c-5.37,0-9.72,4.35-9.72,9.72V304.58z"/> <polygon class="st13" points="970.04,281.07 1024.51,314.36 1058.48,314.36 1058.48,304.58 1024.51,304.58 970.04,271.29 "/> <polygon class="st13" points="970.04,263.8 1024.51,297.09 1058.48,297.09 1058.48,293.24 1024.51,293.24 970.04,259.95 "/> <polygon class="st10" points="1008.21,314.36 953.73,281.07 970.04,281.07 1024.51,314.36 "/> <g> <rect x="970.04" y="263.8" class="st13" width="2.45" height="11.84"/> <rect x="978.92" y="268.83" class="st13" width="2.45" height="11.84"/> <rect x="987.79" y="273.86" class="st13" width="2.45" height="11.84"/> <rect x="996.66" y="278.89" class="st13" width="2.45" height="11.84"/> <rect x="1005.54" y="283.91" class="st13" width="2.45" height="11.84"/> <rect x="1014.41" y="288.94" class="st13" width="2.45" height="11.84"/> <rect x="1023.29" y="293.97" class="st13" width="2.45" height="11.84"/> <rect x="1057.25" y="293.97" class="st13" width="2.45" height="11.84"/> <rect x="1031.78" y="293.97" class="st13" width="2.45" height="11.84"/> <rect x="1040.27" y="293.97" class="st13" width="2.45" height="11.84"/> <rect x="1048.76" y="293.97" class="st13" width="2.45" height="11.84"/> </g> </g> <g> <g> <g> <polygon class="st6" points="973.94,339.35 971.17,253.57 929.75,245.37 888.33,253.57 885.56,339.35 929.75,343.25 "/> <polygon class="st7" points="929.75,343.25 973.94,339.35 971.17,253.57 929.75,245.37 "/> <polygon class="st8" points="970.04,335.38 967.52,257.17 929.75,249.69 891.98,257.17 889.46,335.38 929.75,338.93 "/> <polygon class="st6" points="929.75,338.93 970.04,335.38 967.52,257.17 929.75,249.69 "/> <g> <line class="st9" x1="898.56" y1="293.86" x2="898.56" y2="251.55"/> <line class="st9" x1="923.25" y1="260.72" x2="923.25" y2="246.35"/> <line class="st9" x1="942.75" y1="275.02" x2="942.75" y2="247.72"/> <line class="st9" x1="904.41" y1="277.62" x2="904.41" y2="250.32"/> <line class="st9" x1="960.29" y1="285.41" x2="960.29" y2="251.62"/> </g> </g> <g> <polygon class="st10" points="929.75,245.37 971.17,253.57 979.14,248.1 963.21,224.87 950.46,216.66 929.75,174.29 909.04,216.66 896.29,224.87 880.36,248.1 888.33,253.57 "/> <polygon class="st11" points="929.75,174.29 909.04,216.66 896.29,224.87 880.36,248.1 888.33,253.57 929.75,245.37 "/> <path class="st12" d="M929.75,238.42c0,0-47.41,9.39-49.28,9.76l7.85,5.39l41.42-8.2l41.42,8.2l7.85-5.39L929.75,238.42z"/> <path class="st10" d="M929.75,238.42c0,0-47.41,9.39-49.28,9.76l7.85,5.39l41.42-8.2V238.42z"/> <path class="st13" d="M941.45,223.68c0-5.74-5.24-10.4-11.7-10.4c-6.46,0-11.7,4.66-11.7,10.4H941.45z"/> <path class="st12" d="M940.78,223.68c0-4.31-4.94-7.8-11.03-7.8s-11.03,3.49-11.03,7.8H940.78z"/> <polygon class="st14" points="929.75,174.29 909.04,216.66 896.29,224.87 880.36,248.1 888.33,253.57 929.75,245.37 "/> </g> </g> <g> <g> <line class="st16" x1="799.67" y1="112.98" x2="799.67" y2="151.86"/> <line class="st16" x1="812.62" y1="110.24" x2="812.62" y2="149.12"/> <line class="st16" x1="825.58" y1="107.5" x2="825.58" y2="146.38"/> <line class="st16" x1="838.54" y1="104.76" x2="838.54" y2="143.64"/> <line class="st16" x1="877.42" y1="112.98" x2="877.42" y2="151.86"/> <line class="st16" x1="864.46" y1="110.24" x2="864.46" y2="149.12"/> <line class="st16" x1="851.5" y1="107.5" x2="851.5" y2="146.38"/> <line class="st16" x1="838.54" y1="104.76" x2="838.54" y2="143.64"/> </g> <g> <polygon class="st6" points="882.73,291.5 879.96,157.88 838.54,149.67 797.12,157.88 794.35,291.5 838.54,295.4 "/> <polygon class="st7" points="838.54,295.4 882.73,291.5 879.96,157.88 838.54,149.67 "/> <polygon class="st8" points="878.83,287.53 876.31,161.47 838.54,153.99 800.77,161.47 798.25,287.53 838.54,291.09 "/> <polygon class="st6" points="838.54,291.09 878.83,287.53 876.31,161.47 838.54,153.99 "/> <g> <line class="st9" x1="807.35" y1="198.17" x2="807.35" y2="155.85"/> <line class="st9" x1="832.04" y1="165.02" x2="832.04" y2="150.65"/> <line class="st9" x1="851.54" y1="179.32" x2="851.54" y2="152.03"/> <line class="st9" x1="813.2" y1="181.92" x2="813.2" y2="154.63"/> <line class="st9" x1="869.08" y1="189.72" x2="869.08" y2="155.93"/> </g> </g> <g> <polygon class="st10" points="838.54,104.82 879.96,113.02 887.93,107.55 872,84.31 859.25,76.11 838.54,33.74 817.83,76.11 805.08,84.31 789.15,107.55 797.12,113.02 "/> <polygon class="st11" points="838.54,33.74 817.83,76.11 805.08,84.31 789.15,107.55 797.12,113.02 838.54,104.82 "/> <path class="st12" d="M838.54,97.87c0,0-47.41,9.39-49.28,9.76l7.85,5.39l41.42-8.2l41.42,8.2l7.85-5.39L838.54,97.87z"/> <path class="st10" d="M838.54,97.87c0,0-47.41,9.39-49.28,9.76l7.85,5.39l41.42-8.2V97.87z"/> <path class="st13" d="M850.24,83.13c0-5.74-5.24-10.4-11.7-10.4c-6.46,0-11.7,4.66-11.7,10.4H850.24z"/> <path class="st12" d="M849.57,83.13c0-4.31-4.94-7.8-11.03-7.8s-11.03,3.49-11.03,7.8H849.57z"/> <polygon class="st14" points="838.54,33.74 817.83,76.11 805.08,84.31 789.15,107.55 797.12,113.02 838.54,104.82 "/> </g> <g> <polygon class="st10" points="838.54,143.69 797.12,151.86 797.12,157.84 838.54,149.67 "/> <polygon class="st12" points="838.54,143.69 879.96,151.86 879.96,157.84 838.54,149.67 "/> </g> </g> <g> <g> <polygon class="st6" points="750.47,350.01 747.84,268.45 708.46,260.65 669.07,268.45 666.44,350.01 708.46,353.72 "/> <polygon class="st7" points="708.46,353.72 750.47,350.01 747.84,268.45 708.46,260.65 "/> <polygon class="st8" points="746.77,346.23 744.37,271.86 708.46,264.75 672.54,271.86 670.14,346.23 708.46,349.61 "/> <polygon class="st6" points="708.46,349.61 746.77,346.23 744.37,271.86 708.46,264.75 "/> <g> <line class="st9" x1="678.8" y1="306.76" x2="678.8" y2="266.52"/> <line class="st9" x1="702.28" y1="275.24" x2="702.28" y2="261.58"/> <line class="st9" x1="720.81" y1="288.84" x2="720.81" y2="262.88"/> <line class="st9" x1="684.36" y1="291.31" x2="684.36" y2="265.36"/> <line class="st9" x1="737.5" y1="298.72" x2="737.5" y2="266.59"/> </g> </g> <g> <polygon class="st10" points="708.46,260.65 747.84,268.45 755.42,263.25 740.27,241.15 728.15,233.35 708.46,193.06 688.76,233.35 676.64,241.15 661.49,263.25 669.07,268.45 "/> <polygon class="st11" points="708.46,193.06 688.76,233.35 676.64,241.15 661.49,263.25 669.07,268.45 708.46,260.65 "/> <path class="st12" d="M708.46,254.04c0,0-45.08,8.93-46.86,9.28l7.47,5.13l39.39-7.8l39.39,7.8l7.47-5.13L708.46,254.04z"/> <path class="st10" d="M708.46,254.04c0,0-45.08,8.93-46.86,9.28l7.47,5.13l39.39-7.8V254.04z"/> <path class="st13" d="M719.58,240.02c0-5.46-4.98-9.89-11.12-9.89s-11.12,4.43-11.12,9.89H719.58z"/> <path class="st12" d="M718.94,240.02c0-4.1-4.7-7.42-10.49-7.42s-10.49,3.32-10.49,7.42H718.94z"/> <polygon class="st14" points="708.46,193.06 688.76,233.35 676.64,241.15 661.49,263.25 669.07,268.45 708.46,260.65 "/> </g> &.........完整代码请登录后点击上方下载按钮下载查看
网友评论0