<body>
<div class="wrapper">
<div class="bg-layers"></div>
<div class="main-layers">
<div class="window">
<div class="window-bg">
<div class="guard">
<div class="mask"></div>
<div class="face">
<div class="eyes">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="eyebrows">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</div>
</div>
<div class="shutter">
<p class="title">408</p>
<p class="desc">The server can no longer wait for the request.</p>
</div>
</div>
<div class="knocker">
<div class="knocker-ring">
<div class="knocker-ring-fix"></div>
</div>
</div>
</div>
</div>
</body>*, *::before, *::after {
box-sizing: border-box;
}
.pseudo {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper {
position: relative;
width: 100vw;
height: 100vh;
}
.bg-layers {
@extend .absolute;
z-index: 10;
background: repeating-linear-gradient(90deg, #d1a361 0%, #c38936 2%, #d1a361 8%, #503106 8.5%, #824f04 9%, #d1a361 10%)
}
.main-layers {
position: relative;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 15px;
width: 100%;
height: 100%;
}
.window {
position: relative;
overflow: hidden;
margin-bottom: 40px;
width: 100%;
max-width: 400px;
height: 240px;
border: 16px inset #894f16;
box-shadow: 0 0 5px 5px #120a03;
background: #69c6c9;
}
.window-bg {
@extend .absolute;
}
.guard {
position: absolute;
overflow: hidden;
top: 30px;
left: calc(50% - 90px);
width: 180px;
height: 100%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background: linear-gradient(90deg, #c3dadb 0%, #d8eff1 2%, #d8eff1 3.5%, #fff 4%, #d8eff1 7%, #c3dadb 9%, #a8b8b4 20%, #8396a2 30%, #8396a2 42%, #869aa7 46%, #8396a2 50%, #63839a 60%, #30526a 70%, #000 100%);
.mask {
position: absolute;
z-index: 30;
overflow: hidden;
top: 50px;
left: 20px;
width: calc(100% - 40px);
height: 80px;
border-top: 20px solid #20242d;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
box-shadow: inset 3px 2px 6px 2px #2c4c62;
}
.face {
position: absolute;
z-index: 20;
top: 50px;
left: 20px;
width: calc(100% - 40px);
height: 80px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
background: linear-gradient(90deg, #e9cead 0%, #502e07 100%);
}
.eyebrows {
position: absolute;
width: 80%;
height: 50%;
bottom: 10%;
left: 10%;
display: flex;
justify-content: space-between;
.left, .right {
position: relative;
top: -12px;
margin-top: 14px;
width: 40%;
height: 50%;
border-radius: 50%;
border-top: 4px solid #000;
}
}
.eyes {
position: absolute;
width: 70%;
height: 50%;
bottom: 10%;
left: 15%;
display: flex;
justify-content: space-between;
.left, .right {
position: relative;
margin-top: 14px;
width: 35%;
height: 50%;
border-radius: 50%;
// border: 1px solid;
border-top: 4px solid;
border-bottom: 2px solid;
box-shadow: inset 0 0 30px 0px #dadada;
transition: transform .1s ease;
&::after {
content: "";
position: absolute;
top: -3px;
left: calc(50% - 9px);
width: 18px;
height: 15px;
background: #000;
border-radius: 50%;
}
}
}
}
.shutter {
@extend .absolute;
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-top: 5px solid #69c6c9;
border-bottom: 5px solid #69c6c9;
border-right: 5px solid #4d3204;
border-left: 5px solid #4d3204;
background: linear-gradient(0deg, #000 0%, #4d3204 5%, #a68a5b 10%, #b69349 50%, #a68a5b 90%, #4d3204 95%, #000 100%);
p {
margin: 0;
max-width: 80%;
font-family: monospace;
font-weight: 400;
font-size: 22px;
text-align: center;
color: #000;
text-shadow: .5px .5px 1px #fce0a6;
opacity: 0;
}
.title {
font-size: 40px;
}
}
.knocker {
position: relative;
cursor: pointer;
transform-origin: top center;
// transform: rotateX(60deg);
.knocker-ring {
position: relative;
z-index: 50;
width: 120px;
height: 120px;
background: radial-gradient(circle at center, transparent 0%, transparent 50%, #120a03 50%, #120a03 53.5%, #06212d 53.8%, #041b25 54%, #4d1a04 58%, #472707 60%, #894f16 64%, #120a03 70%, #120a03 100%);
// border: 30px solid #ccc;
border-radius: 50%;
&::after {
content: "";
position: absolute;
z-index: 75;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
border-left: 5px solid #fabf43;
opacity: .75;
}
&::before {
content: "";
position: absolute;
z-index: 25;
top: -10px;
left: calc(50% - 10px);
width: 30px;
height: 65px;
border-radius: 30% / 50%;
box-shadow: 0 0 20px 10px #16040b;
}
}
.knocker-ring-fix {
position: absolute;
z-index: 100;
top: -20px;
left: calc(50% - 20px);
width: 40px;
height: 80px;
border-radius: 30% / 50%;
border-top: 2px solid #120a03;
border-bottom: 2px solid #120a03;
border-left: 3px solid #fabf43;
border-right: 5px solid #120a03;
background: linear-gradient(90deg, #fabf43 0%, #894f16 10%, #894f16 35%, #4d1a04 80%, #041b25 100%);
}
&::before,
&::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: 25;
}
&::before {
top: 8%;
left: 8%;
width: 90%;
height: 90%;
box-shadow: 0 0 30px 15px #16040b;
}
&::after {
top: 5%;
left: 10%;
width: 90%;
height: 90%;
box-shadow: inset 0 0 30px 20px #16040b;
}
}
.closing .eyes {
animation: wink 4s ease forwards 2s;
}
.shutter.open {
transition: transform .5s ease-out;
transition-delay: 1.25s;
transform: translateX(-100%)
}
.closing .shutter {
animation: close .5s ease-in 5.75s forwards;
}
.closing .shutter p {
transition: opacity .2s ease;
transition-delay: 6.5s;
opacity: 1;
}
.knocker.active {
animation: knock 1s ease;
}
@keyframes knock {
35% {
transform: rotate(10deg)
}
65% {
transform: rotate(-10deg)
}
}
@keyframes wink {
0% {
transform: scaleY(1)
}
13% {
transform: scaleY(1)
}
15% {
transform: scaleY(.1)
}
17% {
transform: scaleY(1)
}
48% {
transform: scaleY(1)
}
50% {
transform: scaleY(.1)
}
52% {
transform: scaleY(1)
}
58% {
transform: scaleY(1)
}
60% {
transform: scaleY(.1)
}
62% {
transform: scaleY(1)
}
75% {
transform: scaleY(1)
}
78% {
transform: scaleY(.6)
}
100% {
transform: scaleY(.6)
}
}
@keyframes close {
0% {
transform: translateX(-100%)
}
100% {
transform: translateX(0)
}
}
@keyframes open {
100% {
transform: translateX(-100%)
}
}"use strict";
var knocker = document.querySelector('.knocker');
var shutter = document.querySelector('.shutter');
var wrap = document.querySelector('.wrapper');
knocker.addEventListener('click', knock);
function knock() {
knocker.classList.remove('active');
shutter.classList.remove('open');
wrap.classList.remove('closing');
//trick for restarting the animation
void knocker.offsetWidth;
void shutter.offsetWidth;
void wrap.offsetWidth;
knocker.classList.add('active');
shutter.classList.add('open');
wrap.classList.add('closing');
}
document.addEventListener('DOMContentLoaded', function() {
knocker.click();
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.