<!DOCTYPE html>
<html>
<body style="overflow:hidden">
<style>
@keyframes peepy-move {
from {
transform: rotate(3deg) scale(0.9,0.9) translate(-5%,-5%);
}
50% {
transform: rotate(-3deg) scale(1.1,1.1) translate(5%,5%);
}
to {
transform: rotate(3deg) scale(0.9,0.9) translate(-5%,-5%);
}
}
@keyframes peepy-color {
from {
filter: hue-rotate(0deg)
}
to {
filter: hue-rotate(359deg)
}
}
.peepy {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
z-index: -1;
background-image: url(https://cdn.shopify.com/s/files/1/2597/3774/products/itemlabel-cow-peepy-site-1.jpg?v=1620839788&width=1200);
background-size: 25% 25%;
animation-duration: 0.2s, 1s;
animation-name: peepy-move, peepy-color;
animation-iteration-count: infinite;
}
</style>
<div class="peepy"></div>
<h1 style="transform: rotate(15deg) translate(10vw,50vh); text-align: center;">
peepy. peepy. have you seen him? i love peepy.
do you love peepy?
i need peepy. peepy?
peepy.
<h2>
</body>
</html>