Анимированное изображение хранилища данных

Пример:

HTML:

<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

</g>

<animateMotion

xlink:href="#cube1"

repeatCount="indefinite"

dur="3s"

begin="0s"

repeatCount="indefinite"

rotate="auto">

</animateMotion>

<animateMotion

xlink:href="#cube2"

repeatCount="indefinite"

dur="3s"

begin="1s"

repeatCount="indefinite"

rotate="auto">

</animateMotion>

<animateMotion

xlink:href="#cube3"

repeatCount="indefinite"

dur="3s"

begin="2s"

repeatCount="indefinite"

rotate="auto" begin="0s" dur="3s">

</animateMotion>

</svg>

</section>

CSS:

.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)}
}

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

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: