Пример:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
<section class="storage"> <svg xmlns="http://www.w3.org/2000/svg" id="massive_storage" viewBox="0 0 461 387"> <g id="scene" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <g class="cubes" id="cube3" transform="translate(-116, -235)" fill="none"> <path d="M107.6 233.38l5.33-3.99 6.12 2.6.8 6.58-5.33 3.98-6.12-2.59z"/> <g id="main-cube3"> <path d="M114.58 242.48l-.8-6.58 5.27-3.91M113.78 235.9l-6.18-2.52M102.68 235.93h-8.72M103.55 232.44h-5.23M104.42 239.42h-5.23"/> </g> </g> <g class="cubes" id="cube2" transform="translate(-170, -230)" fill="none"> <path d="M178.1 233.38l5.33-3.99 6.12 2.6.8 6.58-5.33 3.98-6.12-2.59z"/> <g id="main-cube2"> <path d="M185.08 242.48l-.8-6.58 5.27-3.91M184.28 235.9l-6.18-2.52M173.18 235.93h-8.72M174.05 232.44h-5.23M174.92 239.42h-5.23"/> </g> </g> <g class="cubes" id="cube1" transform="translate(-140, -245)" fill="none"> <path d="M142.1 240.38l5.33-3.99 6.12 2.6.8 6.58-5.33 3.98-6.12-2.59z"/> <g id="main-cube1"> <path d="M149.08 249.48l-.8-6.58 5.27-3.91M148.28 242.9l-6.18-2.52M137.18 242.93h-8.72M138.05 239.44h-5.23M138.92 246.42h-5.23"/> </g> </g> <g id="mask"> <rect x="206.42" y="218.1" stroke-width="0" fill="#fff" width="3.95" height="44.53"/> </g> <g id="follow_path_left"> <path id="path_left" stroke-width="0" style="fill:none;" d="M42.67,372.05v-72.83c0,0-5.02-60.17,34.33-60.17s143.67,0,143.67,0"/> </g> <g id="follow_path_right"> <path id="path_right" stroke-width="0" style="fill:none;" d="M54.67,372.05v-97c0,0-5.02-36,34.33-36s143.67,0,143.67,0"/> </g> <path fill="#fff" d="M358.8 282.22v4.8c0 3.85-3.12 6.98-6.98 6.98h-133.4c-3.85 0-6.98-3.12-6.98-6.98v-91.55c0-3.85 3.12-6.98 6.98-6.98h133.4c3.85 0 6.98 3.12 6.98 6.98v86.75M211.45 279.17H358.8"/> <path id="mask" fill="#FFF" d="M347.47 266.96v1.74H222.78v-68.88h124.69v67.14"/> <circle cx="284.4" cy="285.56" r="3.2" fill="none"/> <path fill="transparent" d="M205.35 217.26h6.1v46.21h-6.1zM84.98 223.37h119.49M32.96 264.34c1.22-22.83 20.32-40.98 43.46-40.98h2.93M64.8 269.55v66.29M79.42 254.75h-2.99c-5.62 0-10.52 4.09-11.46 9.46M205.35 254.75H84.86M262.46 182.6h46.21v6.1h-46.21zM262.46 129.71h46.21v6.1h-46.21zM301.69 136.39v45.34M270.3 182.6v-46.21M32.54 269.64v65.33"/> <path fill="#fff" d="M70.03 266.96c0 1.44-1.17 2.62-2.62 2.62H31.67c-1.44 0-2.62-1.17-2.62-2.62 0-1.44 1.17-2.62 2.62-2.62h35.75c1.44.01 2.61 1.18 2.61 2.62zM84.85 256.5c0 1.44-1.17 2.62-2.62 2.62-1.44 0-2.62-1.17-2.62-2.62v-35.75c0-1.44 1.17-2.62 2.62-2.62 1.44 0 2.62 1.17 2.62 2.62v35.75z"/> <circle cx="24.2" cy="214.96" r="19.76" fill="none"/> <path fill="none" d="M33.17 264.18c1.07-22.96 19.89-40.88 43.12-40.88"/> <circle cx="24.2" cy="214.96" r="14.53" fill="none"/> <circle cx="24.2" cy="214.96" r="1.89" fill="none"/> <path fill="none" d="M12.7 223.38l19.72-19.73M15.78 226.47l19.73-19.73M32.42 225.85L12.7 206.12M36.12 223.38l-19.73-19.73M66.54 259.7l-29.59-29.33M69.77 256.76L40.65 227.9M135.36 129.84h283.35c0-9.04-7.87-17.41-17.57-17.41-1.05 0-2.07.11-3.07.3.85-2.84 1.32-5.86 1.32-8.98 0-17.25-13.98-31.23-31.23-31.23-2.48 0-4.89.3-7.2.84 2.12-5.49 3.3-11.45 3.3-17.69 0-27.12-21.99-49.11-49.11-49.11-16.52 0-31.13 8.17-40.03 20.67-4.87-2.07-10.23-3.21-15.86-3.21-21.85 0-39.68 17.23-40.64 38.85-1.02-.14-2.07-.22-3.13-.22-12.6 0-22.81 10.21-22.81 22.81 0 4.37 1.23 8.44 3.36 11.91-1.1-.13-2.22-.2-3.36-.2-12.95 0-23.91 8.43-27.73 20.1-3.14-2.96-7.37-4.85-12.03-4.85-9.69.01-17.56 8.38-17.56 17.42zm261.88-16.92c-.02 0-.04.01-.06.01l-.02-.03.08.02z"/> <ellipse cx="48.63" cy="335.7" fill="none" rx="16.23" ry="2.62"/> <path fill="none" d="M102.67 216.05h85M102.67 262.05h85M122.67 267.05h45M122.67 211.05h45M265.67 145.05v26M261.67 150.05v16M305.67 145.05v26M309.67 150.05v16"/> </g> <path id="arrow_down" fill="#FFF" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" d="M245.19 240.8l17.92 15.31 17.92-15.31h-8.55v-27.03H253.3v27.03z" stroke-linecap="round" stroke-linejoin="round"/> <g id="arrow_up" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M327.24 226.85l-17.92-15.31-17.92 15.31h8.11v27.03h19.18v-27.03zM311.6 213.45l-15.54 13.27M314.65 216.07l-15.02 12.84M317.6 218.78l-17.93 15.32M320.64 221.41l-21.06 18M318.48 228.49l-18.74 16.02M324.04 224.33l-2.94 2.51M318.63 233.6l-19 16.23M318.48 238.96l-17.27 14.75M318.43 244.23l-11.26 9.62M318.61 249.31l-5.3 4.53"/> </g> <g id="clock" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <ellipse cx="285.91" cy="162.19" rx="12.62" ry="12.52"/> <ellipse cx="285.91" cy="162.19" rx="9.26" ry="9.19"/> <path d="M279.46 162.33h1.74M290.79 162.33h1.75M285.56 155.36v1.74M285.56 166.69v1.75"/> <path id="needle" d="M285.56 162.44l3.92-3.92"/> </g> <g id="glass_8" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M350.47 87.37h29.64v5.23h-29.64zM377.94 93.48v24.41h-25.29V93.48"/> <path id="glass_8_fill" d="M378.38 93.48v24.41h-26.16V93.48M363.92 97.92l-11.41 9.75M376.22 97.84l-23.2 19.81M378.19 101.36l-19.36 16.55M378.26 106.52l-13.31 11.38M378.16 111.82l-7.12 6.09M370.04 97.92l-17.51 14.96M357.83 97.92l-5.25 4.48M353.09 97.84h25.29"/> </g> <g id="glass_7" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M314.39 87.37h29.64v5.23h-29.64zM341.85 93.48v24.41h-25.28V93.48"/> <path id="glass_7_fill" d="M342.29 93.48v24.41h-26.16V93.48M327.83 97.92l-11.41 9.75M340.13 97.84l-23.19 19.81M342.11 101.36l-19.37 16.55M342.18 106.52l-13.32 11.38M342.07 111.82l-7.12 6.09M333.95 97.92l-17.51 14.96M321.74 97.92l-5.25 4.48M317 97.84h25.29"/> </g> <g id="glass_6" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M278.2 87.22h29.64v5.23H278.2zM305.67 93.33v24.41h-25.29V93.33"/> <path id="glass_6_fill" d="M306.1 93.33v24.41h-26.15V93.33M291.64 97.77l-11.4 9.75M303.95 97.69l-23.2 19.81M305.92 101.21l-19.36 16.55M305.99 106.37l-13.31 11.38M305.88 111.68l-7.11 6.08M297.76 97.77l-17.5 14.96M285.56 97.77l-5.25 4.48M280.82 97.69h25.28"/> </g> <g id="glass_5" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M241.58 87.07h29.64v5.23h-29.64zM269.05 93.18v24.41h-25.29V93.18"/> <path id="glass_5_fill" d="M269.48 93.18v24.41h-26.15V93.18M255.02 97.62l-11.4 9.75M267.32 97.54l-23.19 19.81M269.3 101.06l-19.36 16.55M269.37 106.22l-13.31 11.38M269.26 111.53l-7.11 6.08M261.14 97.62l-17.5 14.96M248.94 97.62l-5.25 4.48M244.2 97.54h25.28"/> </g> <g id="glass_4" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M205.18 87.07h29.64v5.23h-29.64zM232.64 93.18v24.41h-25.28V93.18"/> <path id="glass_4_fill" d="M233.08 93.18v24.41h-26.16V93.18M218.62 97.62l-11.41 9.75M230.92 97.54l-23.19 19.81M232.9 101.06l-19.36 16.55M232.97 106.22l-13.32 11.38M232.86 111.53l-7.12 6.08M224.74 97.62l-17.5 14.96M212.54 97.62l-5.25 4.48M207.8 97.54h25.28"/> </g> <g id="glass_3"> <g fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M314.39 47.01h29.64v5.23h-29.64zM341.85 53.11v24.42h-25.28V53.11"/> <path id="glass_3_fill" d="M342.29 53.11v24.42h-26.16V53.11M327.83 57.55l-11.41 9.75M340.13 57.47l-23.19 19.82M342.11 61l-19.37 16.54M342.18 66.15l-13.32 11.38M342.07 71.46l-7.12 6.08M333.95 57.55l-17.51 14.96M321.74 57.55l-5.25 4.49M317 57.47h25.29"/> </g> </g> <g id="glass_2" fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M278.2 47.01h29.64v5.23H278.2zM305.67 53.11v24.42h-25.29V53.11"/> <path id="glass_2_fill" d="M306.1 53.11v24.42h-26.15V53.11M291.64 57.55l-11.4 9.75M303.95 57.47l-23.2 19.82M305.92 61l-19.36 16.54M305.99 66.15l-13.31 11.38M305.88 71.46l-7.11 6.08M297.76 57.55l-17.5 14.96M285.56 57.55l-5.25 4.49M280.82 57.47h25.28"/> </g> <g id="glass_1"> <g fill="none" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"> <path d="M241.58 47.01h29.64v5.23h-29.64zM269.05 53.11v24.42h-25.29V53.11"/> <path id="glass_2_fill" d="M269.48 53.11v24.42h-26.15V53.11M255.02 57.55l-11.4 9.75M267.32 57.47l-23.19 19.82M269.3 61l-19.36 16.54M269.37 66.15l-13.31 11.38M269.26 71.46l-7.11 6.08M261.14 57.55l-17.5 14.96M248.94 57.55l-5.25 4.49M244.2 57.47h25.28"/> </g> </g> <path id="wheel_big" fill="#FFF" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" d="M443.25 337.37l-6.69-13.84c1.53-2.03 2.73-4.24 3.63-6.56l15.06-.9 1.08-7.71-14.57-5.1c-.35-2.45-1.07-4.87-2.11-7.19l9.99-11.19-4.73-6.22-13.93 6.62c-2.05-1.52-4.27-2.72-6.61-3.61l-.92-14.94-7.77-1.08-5.12 14.45c-2.47.35-4.9 1.06-7.25 2.09l-11.29-9.92-6.26 4.69 6.68 13.83c-1.53 2.03-2.74 4.23-3.63 6.55l-15.06.9-1.08 7.71 14.57 5.1c.35 2.45 1.07 4.87 2.11 7.19l-9.99 11.19 4.73 6.22 13.93-6.62c2.04 1.52 4.27 2.72 6.61 3.61l.92 14.94 7.77 1.08 5.12-14.45c2.47-.35 4.91-1.05 7.25-2.09l11.29 9.93 6.27-4.68zm-38.2-23.14c-3.94-5.18-2.91-12.55 2.31-16.45 5.22-3.9 12.64-2.87 16.58 2.31 3.94 5.18 2.91 12.55-2.31 16.45-5.22 3.9-12.64 2.87-16.58-2.31z" stroke-linecap="round" stroke-linejoin="round"/> <path id="wheel_small" fill="#FFF" stroke="#337AB7" stroke-width="2" stroke-miterlimit="10" d="M359.25 270.37l-2.88 10.11 4.87 2.47 6.75-8.43c1.75.34 3.55.33 5.28.19l5.14 9.09 5.2-1.67-1.22-10.61c1.44-.97 2.72-2.16 3.87-3.51l10.04 2.79 2.49-4.83-8.35-6.62c.34-1.73.48-3.45.34-5.17l9.16-5.1-1.68-5.15-10.7 1.22c-.97-1.43-2.18-2.69-3.54-3.83l2.8-9.95-4.87-2.47-6.67 8.27c-1.75-.34-3.47-.5-5.2-.36l-5.14-9.09-5.21 1.66 1.19 10.6c-1.44.97-2.79 2.12-3.94 3.48l-10.17-2.85-2.49 4.83 8.48 6.69c-.34 1.73-.36 3.52-.21 5.24l-9.16 5.11 1.67 5.17 10.68-1.17c.94 1.41 2.1 2.75 3.47 3.89zm8.66-7.33c-4.05-2.06-5.65-6.99-3.58-11.01 2.08-4.02 7.04-5.61 11.09-3.55 4.05 2.06 5.65 6.99 3.58 11.01-2.07 4.02-7.04 5.61-11.09 3.55z" stroke-linecap="round" stroke-linejoin="round"/> <animateMotion xlink:href="#cube1" repeatCount="indefinite" dur="3s" begin="0s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#path_left" /> </animateMotion> <animateMotion xlink:href="#cube2" repeatCount="indefinite" dur="3s" begin="1s" repeatCount="indefinite" rotate="auto"> <mpath xlink:href="#path_left" /> </animateMotion> <animateMotion xlink:href="#cube3" repeatCount="indefinite" dur="3s" begin="2s" repeatCount="indefinite" rotate="auto" begin="0s" dur="3s"> <mpath xlink:href="#path_left" /> </animateMotion> </svg> </section> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
.storage { position:relative; padding: 20px; } .storage svg { max-width:600px; display:block; margin:auto; } #wheel_big, #wheel_small { transform-origin:50% 50%; transform-box: fill-box; } #wheel_big { animation: rotate_clockwise linear infinite; animation-duration: 20s; } #wheel_small { animation: rotate_anticlockwise linear infinite; animation-duration: 20s; } #needle{ transform-origin:0% 100%; animation: rotate_clockwise 6s linear infinite; } #arrow_down{ transform-origin:50% 50%; animation: arrow_bottom 3s cubic-bezier(.39,.6,.47,.67) infinite; opacity:0; } #arrow_up{ transform-origin:50% 50%; animation: arrow_up 3s cubic-bezier(.39,.6,.47,.67) infinite; opacity:0; } #glass_1_fill, #glass_2_fill, #glass_3_fill, #glass_4_fill, #glass_5_fill, #glass_6_fill, #glass_7_fill, #glass_8_fill { stroke-dasharray: 99; stroke-dashoffset: 100; animation: glass 6s ease-out infinite; transform-origin:50% 100%; transform-box: fill-box; transform:scaleY(0); } #glass_1_fill, #glass_3_fill, #glass_5_fill, #glass_7_fill { animation-delay: 1s } #glass_2_fill, #glass_4_fill, #glass_6_fill, #glass_8_fill { animation-delay: 2s } .cubes { opacity:0; animation: cubes 3s ease infinite; transform-origin: 50% 50%; } #cube2 { animation-delay:1s } #cube3 { animation-delay:2s } #main-cube1, #main-cube2, #main-cube3 { stroke-dasharray: 99; stroke-dashoffset: 100; animation: follow_path 3s ease infinite; } #main-cube2 { animation-delay:1s } #main-cube3 { animation-delay:2s } @keyframes follow_path { 0% {stroke-dashoffset: 100} 8% {stroke-dashoffset: 100} 100% {stroke-dashoffset: 0} } @keyframes cubes{ 0%{opacity:0} 25%{opacity:1} 90%{opacity:1} 100%{opacity:1} } @keyframes glass { 0%{stroke-dashoffset:100;transform:scaleY(0)} 20%{stroke-dashoffset:0;transform:scaleY(1)} 40%{transform:scaleY(1)} 60%{stroke-dashoffset:0;transform:scaleY(0)} 100%{stroke-dashoffset:0} } @keyframes arrow_bottom { 0% {transform:translateY(0)} 10%{opacity:1;transform:translateY(-10px)} 35%{opacity:0;transform:translateY(10px);opacity:1} 100%{opacity:0;} } @keyframes arrow_up { 0% {transform:translateY(0)} 10%{opacity:1;transform:translateY(10px)} 35%{transform:translateY(-10px);opacity:1} 100%{opacity:0;} } @keyframes rotate_clockwise { 0% {transform:rotate(0)} 100% {transform:rotate(360deg)} } @keyframes rotate_anticlockwise { 0% {transform:rotate(0)} 100% {transform:rotate(-360deg)} } |
Найдено на codepen.io у пользователя Gabi
Добавить комментарий: