Mercurial Hosting > linkmystyle

<!doctype html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script>
			function resized() {
				let imgs = document.querySelectorAll('img[rect]');
				for( let img of imgs ) {
					img.style['border-radius'] = 0.3 * img.width + 'px';
				}
			}
			function loaded() {
				resized();
				let imgs = document.querySelectorAll('img');
				for( let img of imgs ) {
					img.style.visibility = 'visible';
					img.style['animation-play-state'] = 'running';
				}
			}
		</script>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				margin: 0;
			}
			div {
				width: 90%;
				aspect-ratio: 950 / 535;
				background-color: rgb(138, 127, 210);
				position: relative;
			}
			div:hover img {
				animation-play-state: paused;
			}
			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				animation-duration: 7s;
				animation-iteration-count: infinite;
				box-shadow: 5px 5px 20px 1px rgba(0,0,0,0.5);
				visibility: hidden;
				animation-play-state: paused;
			}
			img[circle] {
				border-radius: 50%;
			}
			img[bio] {
				animation-name: bio;
				width: 12%;
			}
			@keyframes bio {
				0% {
					opacity: 0;
					transform: translate(-50%,-50%) scale(1);
				}
				15% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(1.4375);
				}
				20%, 50% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(1);
				}
				60% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(1.1875);
				}
				65% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(0.875);
				}
				70% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(1.1875);
				}
				75% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(0.875);
				}
				80%, 100% {
					opacity: 1;
					transform: translate(-50%,-50%) scale(1);
				}
			}
			img[i1] {
				animation-name: i1;
				width: 14%;
			}
			@keyframes i1 {
				0%, 28% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				38% {
					opacity: 0.1;
				}
				48%, 78% {
					opacity: 1;
					top: 61%;
					left: 89%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[i2] {
				animation-name: i2;
				width: 17%;
			}
			@keyframes i2 {
				0%, 30% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				40% {
					opacity: 0.1;
				}
				50%, 80% {
					opacity: 1;
					top: 74%;
					left: 69%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[i3] {
				animation-name: i3;
				width: 15%;
			}
			@keyframes i3 {
				0%, 26% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				36% {
					opacity: 0.1;
				}
				46%, 76% {
					opacity: 1;
					top: 25%;
					left: 75%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[i4] {
				animation-name: i4;
				width: 13%;
			}
			@keyframes i4 {
				0%, 20% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				30% {
					opacity: 0.1;
				}
				40%, 70% {
					opacity: 1;
					top: 76%;
					left: 32%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[i5] {
				animation-name: i5;
				width: 16%;
			}
			@keyframes i5 {
				0%, 22% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				32% {
					opacity: 0.1;
				}
				42%, 72% {
					opacity: 1;
					top: 56%;
					left: 12%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[i6] {
				animation-name: i6;
				width: 14%;
			}
			@keyframes i6 {
				0%, 24% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				24% {
					opacity: 0.1;
				}
				44%, 74% {
					opacity: 1;
					top: 20%;
					left: 26%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[ins] {
				animation-name: ins;
				width: 7%;
			}
			@keyframes ins {
				0%, 30% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				40% {
					opacity: 0.1;
				}
				50%, 80% {
					opacity: 1;
					top: 25%;
					left: 58%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[tk] {
				animation-name: tk;
				width: 7%;
			}
			@keyframes tk {
				0%, 32% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				42% {
					opacity: 0.1;
				}
				52%, 82% {
					opacity: 1;
					top: 45%;
					left: 35%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
			img[yt] {
				animation-name: yt;
				width: 7%;
			}
			@keyframes yt {
				0%, 34% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
				44% {
					opacity: 0.1;
				}
				54%, 84% {
					opacity: 1;
					top: 23%;
					left: 43%;
				}
				85% {
					opacity: 0.1;
				}
				90%, 100% {
					opacity: 0;
					top: 50%;
					left: 50%;
				}
			}
		</style>
	</head>
	<body onload="loaded()" onresize="resized()">
		<div>
			<img bio rect src="https://test.linkmy.style/images/home/bio.png">
			<img i1 rect src="https://test.linkmy.style/images/home/i1.png">
			<img i2 rect src="https://test.linkmy.style/images/home/i2.png">
			<img i3 rect src="https://test.linkmy.style/images/home/i3.png">
			<img i4 rect src="https://test.linkmy.style/images/home/i4.png">
			<img i5 rect src="https://test.linkmy.style/images/home/i5.png">
			<img i6 rect src="https://test.linkmy.style/images/home/i6.png">
			<img ins circle src="https://test.linkmy.style/images/home/ins.png">
			<img tk circle src="https://test.linkmy.style/images/home/tk.png">
			<img yt circle src="https://test.linkmy.style/images/home/yt.png">
		</div>
	</body>
</html>
author	Franklin Schmidt <fschmidt@gmail.com>
date	Fri, 11 Jul 2025 21:23:39 -0600
parents	8f4df159f06b
children