body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: darkslategray;
}

* {
	box-sizing: border-box;
}

.parrot {
	width: 10em;
	height: 10em;
	font-size: 30px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transform: rotate(45deg);
}

/* eye */
.parrot::before {
	content: '';
	position: relative;
	width: 1em;
	height: 1em;
	background-color: black;
	border-radius: 50%;
	z-index: 1;
	left: -1em;
	transform-origin: 1em 0;
	transition: 0.5s;
}

.parrot > * {
	position: absolute;
	transition: 0.5s;
}

.parrot .outer {
	width: 100%;
	height: 100%;
	border: 1em solid;
	border-color: transparent transparent orangered tomato;
	border-radius: 50%;
}

.parrot .middle {
	width: 80%;
	height: 80%;
	border: 4em solid;
	border-color: gold transparent gainsboro white;
	border-radius: 50%;
}

.parrot .inner {
	width: 40%;
	height: 40%;
	border: 2em solid;
	border-color: transparent orange transparent transparent;
	border-radius: 50%;
}

.parrot:hover::before {
	transform: rotate(180deg);
}

.parrot:hover .outer {
	transform: rotate(calc(180deg + 4turn));
	border-color: transparent transparent lightseagreen darkcyan;
}

.parrot:hover .middle {
	transform: rotate(calc(-180deg + 3turn));
	border-color: transparent orange white gainsboro;
}

.parrot:hover .inner {
	transform: rotate(calc(90deg + 2turn));
	border-color: transparent gold transparent transparent;
}