CSS WASHING MACHINE

Image Of Output

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body>
	<div id="all">
	<div class="top"></div>
	<div class="bod">
	<div class="upper">
	<div class="u1"></div>
	<div class="u2"></div>
	<div class="u3"></div>
	<div class="u4">
	<table border="0">
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>

	<tr>
	<td></td>
	<td></td>
	<td></td>
	</tr>
	</table>
	</div>

	<div class="u5"></div>

	</div>

	<div class="circle_out"></div>
	<div class="circle_inn"></div>

	<div class="box"></div>
	</div>

	</div>
	</body>

	</html>

view raw css_washing-machine.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #29b6f6;
	}

	#all {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.top {
	width: 200px;
	height: 8px;
	background-color: white;
	border-bottom: 2.5px solid #131447;
	}

	.bod {
	width: 200px;
	height: 260px;
	background-color: white;
	}

	.upper {
	width: 100%;
	height: 40px;
	/* border-bottom:2px solid gray;*/
	}

	.u1 {
	width: 55px;
	height: 40px;
	border-bottom: 2px solid silver;
	border-right: 2px solid silver;
	position: absolute;
	}

	.u1:before {
	content: " ";
	position: absolute;
	width: 30px;
	height: 5px;
	background: -webkit-linear-gradient(left, silver 55%, white);
	top: 30px;
	left: 20px;
	}

	.u2 {
	width: 18px;
	height: 24px;
	background: -webkit-linear-gradient(
	gray 0px 3px,
	white 3px 6px,
	gray 6px 9px,
	white 9px 12px,
	gray 12px 15px,
	white 15px 18px,
	gray 18px 21px,
	white 21px 24px
	);
	position: absolute;
	left: 62px;
	top: 22px;
	}

	.u3 {
	width: 30px;
	height: 40px;
	border-radius: 0px 0px 40px 40px;
	background-color: #11163f;
	position: absolute;
	left: 85px;
	}

	.u3:before {
	content: " ";
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 22px;
	background-color: #e8e7de;
	top: 15px;
	left: 4px;
	}

	.u3:after {
	content: " ";
	position: absolute;
	width: 18px;
	height: 7px;
	background-color: #293166;
	top: 5px;
	left: 6px;
	}

	.u4 {
	position: relative;
	float: right;
	right: 27px;
	top: 13px;
	}

	td {
	width: 12px;
	height: 1px;
	background-color: gray;
	}

	tr:nth-child(5) > td {
	height: 2px;
	background-color: white;
	border: 1px solid gray;
	}

	.u5 {
	width: 15px;
	height: 3px;
	background-color: #1e275d;
	left: 180px;
	position: relative;
	top: 30px;
	animation-name: color_change;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	}

	@keyframes color_change {
	0% {
	background-color: #1e275d;
	}
	50% {
	background-color: #1e275d;
	}
	51% {
	background-color: red;
	}
	100% {
	background-color: red;
	}
	}

	.circle_out {
	width: 160px;
	height: 160px;
	border-radius: 150px;
	background: -webkit-linear-gradient(left, #121250, #263d71, #344b75);
	position: relative;
	top: 20px;
	left: 20px;
	animation-name: round;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	}

	@keyframes round {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(2000deg);
	}
	}

	.circle_out:before {
	content: " ";
	position: absolute;
	width: 156px;
	height: 156px;
	border-radius: 156px;
	background: radial-gradient(transparent 0px 60px, white 60px 156px);
	left: 2.2px;
	top: 2.1px;
	}

	.circle_out:after {
	content: " ";
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 120px;
	background-color: transparent;
	left: 20.5px;
	top: 20.5px;
	box-shadow: inset #2d4473 0px 0px 5px 10px;
	}

	.circle_inn {
	position: absolute;
	width: 120px;
	height: 120px;
	border-radius: 120px;
	background: -webkit-repeating-linear-gradient(
	top left,
	transparent 0px 40px,
	white 40px 80px
	);
	opacity: 0.1;
	left: 41px;
	top: 90px;
	box-shadow: inset 7px 7px #383e78;
	}

	.box {
	width: 40px;
	height: 20px;
	border-radius: 2px;
	border: 1.5px solid silver;
	float: right;
	position: relative;
	top: 12px;
	right: 8px;
	}