<div class="frame">
	<div class="text">
		<span>❤</span>
		<span></span>
		<span>E</span>
		<span>V</span>
		<span>O</span>
		<span>L</span>
		<span></span>
		<span>H</span>
		<span>T</span>
		<span>I</span>
		<span>W</span>
		<span></span>
		<span>E</span>
		<span>D</span>
		<span>A</span>
		<span>M</span>
		<span></span>
		<span>❤</span>
		<span></span>
		<span>E</span>
		<span>V</span>
		<span>O</span>
		<span>L</span>
		<span></span>
		<span>H</span>
		<span>T</span>
		<span>I</span>
		<span>W</span>
		<span></span>
		<span>E</span>
		<span>D</span>
		<span>A</span>
		<span>M</span>
		<span></span>
		<span>❤</span>
		<span></span>
		<span>E</span>
		<span>V</span>
		<span>O</span>
		<span>L</span>
		<span></span>
		<span>H</span>
		<span>T</span>
		<span>I</span>
		<span>W</span>
		<span></span>
		<span>E</span>
		<span>D</span>
		<span>A</span>
		<span>M</span>

	</div>
</div>

:root {
	--duration: 10s;
	--size: 80vw;
	--characters: 14;
	--font-size: 22px;
	--delay-character: 0.2s;
	--text-color-hover: #ff8489;
}

body {
	height: 100vh;
	display: flex;
	align-items: center;
	background: url(https://img.freepik.com/vector-gratis/fondo-abstracto-blanco_23-2148806276.jpg?size=626&ext=jpg)
		no-repeat center;
	background-size: cover;
}

.frame {
	width: var(--size);
	height: var(--size);
	max-width: 400px;
	max-height: 400px;
	margin: 0 auto;
	border: 2px #fbfbfb solid;
	position: relative;
	box-shadow: inset 0 0 0 20px white;
	background: url(https://images.unsplash.com/photo-1488161628813-04466f872be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80)
		no-repeat center;
	background-size: cover;
	transition: ease all 0.3s;
	&:hover {
		box-shadow: inset 0 0 0 0 white;
		border: 2px #f9f9f9 solid;
		cursor: pointer;
		.text {
			mix-blend-mode: difference;
			span {
				color: var(--text-color-hover);
			}
		}
	}
	.text {
		transform: translate(
			calc(calc(var(--font-size) * -1) / 2),
			calc(calc(var(--font-size) * -1) / 2)
		);
		position: relative;
		height: 100%;
		transition: ease all 0.3s;
	}
	span {
		font-size: var(--font-size);
		display: inline-block;
		text-align: center;
		width: var(--font-size);
		animation: frameMove var(--duration) linear infinite;
		position: absolute;
		transition: ease all 0.3s;
		@for $i from 1 through 52 {
			&:nth-of-type(#{$i}) {
				animation-delay: calc(var(--delay-character) * #{$i});
			}
		}
	}
}
@keyframes frameMove {
	0% {
		top: 0;
		left: 0;
		transform: rotate(0deg);
	}
	24% {
		top: 0;
		left: 100%;
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(90deg);
	}
	49% {
		top: 100%;
		left: 100%;
		transform: rotate(90deg);
	}
	50% {
		transform: rotate(180deg);
	}
	74% {
		top: 100%;
		left: 0%;
		transform: rotate(180deg);
	}
	75% {
		transform: rotate(270deg);
	}
	99% {
		top: 0%;
		left: 0%;
		transform: rotate(270deg);
	}
	100% {
		transform: rotate(360deg);
	}
}