logo DevAnswer - Developers Answer

Pure CSS Animating 404 Not Found Page

23rd October

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --white:    #FFFFFF;
    --red:      #FF3F3F;
    --dark-red: #AA2727;
    
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: calc( 14px + (25 - 14) * ((100vw - 400px) / ( 1200 - 400)));
}
body {
    background: var(--red);
}
.page-wrapper {
    position: relative;
    height: 90vh;
    width: 90vw;
    margin: 5vh 0 0 5vw;
    overflow: hidden;
    background: var(--red);
    box-shadow: 0 2rem 3rem var(--dark-red);
}
@-webkit-keyframes circle-animation {
    0%   { transform: translateX(-50%) translateY(-50%) scale(0); }
    10%  { transform: translateX(-50%) translateY(-50%) scale(1); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1); }
}
@keyframes circle-animation {
    0%   { transform: translateX(-50%) translateY(-50%) scale(0); }
    10%  { transform: translateX(-50%) translateY(-50%) scale(1); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1); }
}
.circles-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.circles-layer > .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 300vw;
        width: 300vw;
        transform: translateX(-50%) translateY(-50%);
        border-radius: 50%;
        -webkit-animation: circle-animation 10s linear infinite;
                animation: circle-animation 10s linear infinite;
        will-change: transform;
}
.circles-layer > .circle.-white {
            border: 30vw solid var(--white);
}
.circles-layer > .circle.-red {
            border: 25vw solid var(--dark-red);
}
.circles-layer > .circle:nth-of-type(2) {
            -webkit-animation-delay: 100ms;
                    animation-delay: 100ms;
}
.circles-layer > .circle:nth-of-type(3) {
            -webkit-animation-delay: 150ms;
                    animation-delay: 150ms;
}
.circles-layer > .circle:nth-of-type(4) {
            -webkit-animation-delay: 200ms;
                    animation-delay: 200ms;
}
@-webkit-keyframes number-animation {
    0%   { transform: scale(0);   opacity: 0; }
    30%  { transform: scale(0);   opacity: 0; }
    32%  { transform: scale(.95); opacity: 1; }
    35%  { transform: scale(1);   opacity: 1; }
    37%  { transform: scale(1);   opacity: 1; }
    40%  { transform: scale(0);   opacity: 0; }
    50%  { transform: scale(0);   opacity: 0; }
    52%  { transform: scale(.45); opacity: 1; }
    55%  { transform: scale(.5);  opacity: 1; }
    57%  { transform: scale(.5);  opacity: 1; }
    60%  { transform: scale(0);   opacity: 0; }
    70%  { transform: scale(0);   opacity: 0; }
    72%  { transform: scale(.75); opacity: 1; }
    75%  { transform: scale(.8);  opacity: 1; }
    77%  { transform: scale(.8);  opacity: 1; } 
    80%  { transform: scale(0);   opacity: 0; }
    100% { transform: scale(0);   opacity: 0; }
}
@keyframes number-animation {
    0%   { transform: scale(0);   opacity: 0; }
    30%  { transform: scale(0);   opacity: 0; }
    32%  { transform: scale(.95); opacity: 1; }
    35%  { transform: scale(1);   opacity: 1; }
    37%  { transform: scale(1);   opacity: 1; }
    40%  { transform: scale(0);   opacity: 0; }
    50%  { transform: scale(0);   opacity: 0; }
    52%  { transform: scale(.45); opacity: 1; }
    55%  { transform: scale(.5);  opacity: 1; }
    57%  { transform: scale(.5);  opacity: 1; }
    60%  { transform: scale(0);   opacity: 0; }
    70%  { transform: scale(0);   opacity: 0; }
    72%  { transform: scale(.75); opacity: 1; }
    75%  { transform: scale(.8);  opacity: 1; }
    77%  { transform: scale(.8);  opacity: 1; } 
    80%  { transform: scale(0);   opacity: 0; }
    100% { transform: scale(0);   opacity: 0; }
}
.numbers-layer {
    position: absolute;
    top: -1rem;
    left: -1rem;
    height: 100%;
    width: 100%;
}
.numbers-layer > .number {
        position: absolute;
        font-size: 10rem;
        color: var(--white);
        transform: scale(0);
        opacity: 0;
        font-weight: 200;
        -webkit-animation: number-animation 10s linear infinite;
                animation: number-animation 10s linear infinite;
        will-change: transform, opacity;
}
.numbers-layer > .number.-with-shadow {
            text-shadow: 1rem 1rem var(--dark-red);
}
.numbers-layer > .number:nth-of-type(1)  { top: 5%;  left: 5%;  -webkit-animation-delay:  0;  animation-delay:  0;    }
.numbers-layer > .number:nth-of-type(2)  { top: 15%; left: 55%; -webkit-animation-delay: 40ms; animation-delay: 40ms; 
        font-size: 15rem; }
.numbers-layer > .number:nth-of-type(3)  { top: 25%; left: 15%; -webkit-animation-delay: 80ms; animation-delay: 80ms; }
.numbers-layer > .number:nth-of-type(4)  { top: 75%; left: 20%; -webkit-animation-delay: 120ms; animation-delay: 120ms; }
.numbers-layer > .number:nth-of-type(5)  { top: 25%; left: 75%; -webkit-animation-delay: 160ms; animation-delay: 160ms; 
        font-size: 6rem; }
.numbers-layer > .number:nth-of-type(6)  { top: 65%; left: 45%; -webkit-animation-delay: 200ms; animation-delay: 200ms; }
.numbers-layer > .number:nth-of-type(7)  { top: 45%; left: 85%; -webkit-animation-delay: 240ms; animation-delay: 240ms; }
.numbers-layer > .number:nth-of-type(8)  { top: 10%; left: 85%; -webkit-animation-delay: 280ms; animation-delay: 280ms; }
.numbers-layer > .number:nth-of-type(9)  { top: 40%; left: 35%; -webkit-animation-delay: 320ms; animation-delay: 320ms; 
        font-size: 15rem; }
.numbers-layer > .number:nth-of-type(10) { top: 70%; left: 65%; -webkit-animation-delay: 360ms; animation-delay: 360ms; }
.numbers-layer > .number:nth-of-type(11) { top: 10%; left: 30%; -webkit-animation-delay: 400ms; animation-delay: 400ms; 
        font-size: 6rem; }
.numbers-layer > .number:nth-of-type(12) { top: 45%; left: 10%; -webkit-animation-delay: 440ms; animation-delay: 440ms; }
.oops-message {
    position: absolute;
    width: 20rem;
    left: 50%;
    bottom: 2rem;
    margin-left: -10rem;
    font-weight: 400;
    text-align: center;
    color: var(--white);
}
.oops-message > .button {
        display: inline-block;
        margin-top: .5rem;
        background: var(--white);
        color: var(--red);
        padding: 0 2rem;
        line-height: 2rem;
        text-decoration: none;
        border-radius: 1rem;
        transition: all 120ms ease-in;
}
.oops-message > .button:hover,
        .oops-message > .button:focus {
            background: var(--dark-red);
            color: var(--white);
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,400'>
<div class="page-wrapper">
  <div class="circles-layer">
    <div class="circle -white"></div>
    <div class="circle -red"></div>
    <div class="circle -white"></div>
    <div class="circle -red"></div>
  </div>
  <div class="numbers-layer">
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number">4</div>
    <div class="number -with-shadow">0</div>
    <div class="number -with-shadow">0</div>
    <div class="number -with-shadow">0</div>
    <div class="number -with-shadow">0</div>
  </div>
  <div class="oops-message">
    <div class="test">Opps... looks like You got lost</div><a class="button" href="">Try again</a>
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>



Other Codes

404 Web Page Sample with Animating Objects


404 Web Page Sample with Animating Objects

In this code we have a large 404 phrase that elements such as clock, bag and umbrella are on the zero character and move. A bicycle also passes in front . . .
Dynamik 404 Page with Moving Triangles and . . .


Dynamik 404 Page with Moving Triangles and . . .

In this code, there are two triangles in the corner of the page that get bigger and smaller. Both of these triangles have shadows.
HTML 404 Page with Moving Shapes and Menus


HTML 404 Page with Moving Shapes and Menus

In this post, we have a beautiful and interactive 404 purple page. Long oval shapes move in this code. The expression 404 is placed on all of these figures.
404 Page with Astronaut by the Moon Style . . .


404 Page with Astronaut by the Moon Style . . .

In this post, we have a 404 page coin that contains a month and an astronaut. The astronaut's oxygen tube also vibrates in space.