<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>404</title>
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
body {
background: #19a39d;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
--size: min(25vw, 25vh);
--b-bg: #d0d2ca;
--c-bg: #585858;
gap: calc(var(--size) / 3);
}
.four {
position: relative;
color: var(--b-bg);
font-size: calc(var(--size) / 2.5);
width: 1.75em;
height: 1.75em;
border-bottom: 0.4em solid;
border-left: 0.4em solid;
}
.four:after {
content: '';
position: absolute;
background-color: var(--c-bg);
width: 0.4em;
height: 2em;
left: 50%;
top: 0;
transform: translate(-50%, 25%);
}
.sheep {
font-size: calc(var(--size) / 2.5);
height: var(--size);
width: var(--size);
border-radius: 50%;
background: var(--b-bg);
position: relative;
}
.sheep:after {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -25%);
color: var(--b-bg);
background: currentcolor;
height: 1em;
width: 1em;
border-radius: 50%;
box-shadow: 0 2em, 1em 1em, -1em 1em, -0.75em 1.75em, 0.75em 1.75em,
0.75em 0.25em, -0.75em 0.25em;
}
.sheep:before {
content: '';
position: absolute;
color: var(--c-bg);
background: currentcolor;
width: 0.2em;
height: 0.65em;
top: 100%;
left: 25%;
transform: translate(0, -25%);
box-shadow: 1em 0;
}
.sheep .head {
position: absolute;
width: 0.75em;
height: 1em;
border-radius: 0.3em;
background: var(--c-bg);
z-index: 2;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 5%;
animation: 5s headMove infinite;
}
.sheep .head:after {
content: '';
position: absolute;
left: 50%;
bottom: 0.2em;
transform: translatex(-50%);
width: 0.2em;
height: 0.13em;
background: rgba(0, 0, 0, 0.1);
border-bottom: 0.06em solid #414241;
border-radius: 0.05em;
}
.sheep .head:before {
content: '';
position: absolute;
left: 50%;
bottom: 0.12em;
transform: translatex(-50%);
width: 0.05em;
height: 0.1em;
background: #414241;
border-radius: 0.02em;
}
.sheep .head .ear {
position: absolute;
height: 0.6em;
width: 0.5em;
border-radius: 0 100%;
background: #494949;
top: -15%;
left: 90%;
transform: rotate(-10deg);
animation: 5s rightEarMove infinite;
}
.sheep .head .ear + .ear {
transform: rotate(90deg);
animation: 5s leftEarMove infinite;
left: auto;
right: 90%;
}
.sheep .head .eye {
position: absolute;
left: -0.15em;
top: -0.15em;
height: 0.55em;
width: 0.55em;
border-radius: 50%;
border: 0.1em solid var(--c-bg);
background: var(--c-bg) linear-gradient(var(--c-bg) 40%, #fff 0)
no-repeat;
background-size: 100% 0.88em;
background-position: 0px -0.2em;
overflow: hidden;
animation: 5s eyeShade infinite;
}
.sheep .head .eye:before {
content: '';
position: absolute;
height: 0.1em;
width: 0.1em;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #3e3f3e;
transform-origin: 50% -0.1em;
animation: 5s eyeMovement infinite;
}
.sheep .head .eye + .eye {
left: auto;
right: -0.15em;
}
@keyframes headMove {
0%,
50%,
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
25% {
transform: translate(-75%, -50%) rotate(5deg);
}
75% {
transform: translate(-25%, -50%) rotate(-5deg);
}
}
@keyframes rightEarMove {
0%,
50%,
100% {
transform: translatex(0) rotate(-10deg);
}
25% {
transform: translatex(0) rotate(-15deg);
}
75% {
transform: translatex(-0.1em) rotate(-10deg);
}
}
@keyframes leftEarMove {
0%,
50%,
100% {
transform: translatex(0) rotate(90deg);
}
25% {
transform: translatex(0.1em) rotate(90deg);
}
75% {
transform: translatex(-0.1em) rotate(90deg);
}
}
@keyframes eyeMovement {
0%,
50%,
100% {
transform: translate(-50%, 0.05em) rotate(0deg);
}
25% {
transform: translate(-50%, 0.05em) rotate(45deg);
}
75% {
transform: translate(-50%, 0.05em) rotate(-45deg);
}
}
@keyframes eyeShade {
0%,
50%,
100% {
background-position: 0px -0.14em;
}
25%,
75% {
background-position: 0px -0.22em;
}
}
</style>
</head>
<body>
<div class="four"></div>
<div class="sheep">
<div class="head">
<div class="ear"></div>
<div class="ear"></div>
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
<div class="four"></div>
</body>
</html>