css-orbital/style.css

:root {
	--count__orbitals: 8;

	--width__inner-content: 11em;
	--width__orbital: 7.5em;

	--radius: 14em;

	--duration__rotation: 50s;
	--duration__pulse: 1.5s;
	--duration__image-hover: 0.3s;
	--duration__feature-hover: 0.3s;
}

body, html {
	padding: 0;
	margin: 0;
	background-color: rgba(0, 255, 0, 0.1);
}

.wrapper {
	position: relative;
	width: 80vw;
	height: 80vh;
	overflow: hidden;

	font-size: 1rem;

	background-color: white;
}

ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.orbitals {
	position: relative;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
}

.orbital {
	position: absolute;
	width: var(--width__orbital);
	height: var(--width__orbital);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(calc(-50% + var(--x-offset)), calc(-50% - var(--y-offset)));
}

.orbital {
	/* --angle must be in radians so multiply by 2 * pi  */
	--angle: calc(6.28318530360 * var(--index) / var(--count__orbitals));

	/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
	--sin-term1: var(--angle);
  --sin-term2: calc((var(--angle) * var(--angle) * var(--angle)) / 6);
  --sin-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 120);
  --sin-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 5040);
  --sin-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 362880);
  --sin: calc(var(--sin-term1) - var(--sin-term2) + var(--sin-term3) - var(--sin-term4) + var(--sin-term5));

	/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
	--cos-term1: 1;
  --cos-term2: calc((var(--angle) * var(--angle)) / 2);
  --cos-term3: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 24);
  --cos-term4: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 720);
  --cos-term5: calc((var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle) * var(--angle)) / 40320);
  --cos: calc(var(--cos-term1) - var(--cos-term2) + var(--cos-term3) - var(--cos-term4) + var(--cos-term5));

	--x-offset: calc(var(--radius) * var(--cos));
	--y-offset: calc(var(--radius) * var(--sin));

	&:nth-child(1) { --index: 0; }
	&:nth-child(2) { --index: 1; }

	&:nth-child(3) { --index: -1; }
	&:nth-child(4) { --index: 2; }

	&:nth-child(5) { --index: -2; }
	&:nth-child(6) { --index: 3; }

	&:nth-child(7) { --index: -3; }
	&:nth-child(8) { --index: 4; }

	&:nth-child(9) { --index: -4; }
	&:nth-child(10) { --index: 5; }

	&:nth-child(11) { --index: -5; }
	&:nth-child(12) { --index: 6; }
}


.orbital-content {
	width: 100%;
	height: 100%;
}

.inner-content {
	position: absolute;
	width: var(--width__inner-content);
	height: var(--width__inner-content);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	border-radius: 3em;
	overflow: hidden;
}

.image-hover {
	width: 100%;
	height: 100%;

	& > .img {
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		object-fit: cover;

		&:last-child {
			transition: opacity var(--duration__image-hover);
			opacity: 0;
		}
	}

	&:hover > .img {
		&:last-child {
			opacity: 1;
		}
	}
}

.content-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bg {
	&::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 50%;

		transition: background-color var(--duration__feature-hover);
	}
}

.bg--red {
	&::before {
		background-color: rgba(255, 200, 200);
	}

	&:hover::before {
			background-color: rgba(255, 150, 150);
	}
}

.bg--green {
	&::before {
		background-color: rgba(200, 255, 200);
	}

	&:hover::before {
		background-color: rgba(150, 255, 150);
	}
}

.bg--blue {
	&::before {
		background-color: rgba(200, 200, 255);
	}

	&:hover::before {
		background-color: rgba(150, 150, 255);
	}
}

.feature {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;

	& > .feature-item {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		transition: opacity var(--duration__feature-hover);

		&:first-child {
			opacity: 1;
		}

		&:last-child {
			opacity: 0;
		}
	}

	&:hover {
		& > .feature-item {
			&:first-child {
				opacity: 0;
			}

			&:last-child {
				opacity: 1;
			}
		}
	}
}

.orbitals:hover {
	&.clockwise,
	& .anti-clockwise {
		animation-play-state: paused;
	}
}

.orbital.pulse:hover {
	&::before {
		animation-play-state: paused;
	}
}

.clockwise {
	animation: rotate var(--duration__rotation) linear infinite running;
}

.anti-clockwise {
	animation: rotate var(--duration__rotation) reverse linear infinite running;
}

.pulse {
	&::before {
		animation: pulse var(--duration__pulse) alternate ease-in-out infinite running;
	}

	&:nth-child(2) {
		&::before {
			animation-delay: 2s;
		}
	}

	&:nth-child(3) {
		&::before {
		animation-delay: 0.4s;
		}
	}

	&:nth-child(4) {
		&::before {
		animation-delay: 1.5s;
		}
	}

	&:nth-child(5) {
		&::before {
		animation-delay: 0.7s;
		}
	}

	&:nth-child(6) {
		&::before {
		animation-delay: 0.2s;
		}
	}

	&:nth-child(7) {
		&::before {
		animation-delay: 1.1s;
		}
	}

	&:nth-child(8) {
		&::before {
		animation-delay: 0.4s;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1);
	}
}