CSS animation chapter 404 animation

The current page is inaccessible, may not have permission or has been deleted. As a person in the Internet industry, have you seen all kinds of 404 pages? Today, I just found a more interesting 404 page, as shown in the picture above, doesn't it feel cool? This article will share with you the principle of implementation. .

foreword

When you see the 404 above, your first impression would be to do this?

Come on, UI classmates give me a GIF.
Of course, this method is definitely the easiest way to implement for front-end students, just load a picture.

But for an ambitious front-end, we will never agree to do this. The cost of loading a GIF image is too high. In the case of poor network, the white screen time will be too long, so we try our best to implement it with code to reduce this an unnecessary network request.

accomplish

When you look at this animation carefully, you can find that the main body has only one label, and the content is 404. The other animations are implemented based on this main body, so let's write the simplest code first html code.

 <h1 data-t="404">404</h1>

Careful students should see that we have customized a familiar one data-t , which we will use in css later, and then realize the animation effect of the main body. The main animation effect is to make the main body shake and increase the blur. The effect, the code implementation is as follows.

 h1 {
  text-align: center;
  width: 100%;
  font-size: 6rem;
  animation: shake .6s ease-in-out infinite alternate;
}

@keyframes shake {
  0% {
    transform: translate(-1px)
  }
  
  10% {
    transform: translate(2px, 1px)
  }
  
  30% {
    transform: translate(-3px, 2px)
  }
  
  35% {
    transform: translate(2px, -3px);
    filter: blur(4px)
  }
  
  45% {
    transform: translate(2px, 2px) skewY(-8deg) scaleX(.96);
    filter: blur(0)
  }
  
  50% {
    transform: translate(-3px, 1px)
  }
}

Next, add the content of the two sub-animations behind the main animation, which is based on pseudo-elements. The content of pseudo-elements is obtained from the above html customized data-t , and mainly used clip in rect , the specific css code is as follows.

 h1:before {
    content: attr(data-t);
    position: absolute;
    left: 50%;
    transform: translate(-50%,.34em);
    height: .1em;
    line-height: .5em;
    width: 100%;
    animation: scan .5s ease-in-out 275ms infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
    overflow: hidden;
    opacity: .7;
}

@keyframes glitch-anim {
    0% {
        clip: rect(32px,9999px,28px,0)
    }

    10% {
        clip: rect(13px,9999px,37px,0)
    }

    20% {
        clip: rect(45px,9999px,33px,0)
    }

    30% {
        clip: rect(31px,9999px,94px,0)
    }

    40% {
        clip: rect(88px,9999px,98px,0)
    }

    50% {
        clip: rect(9px,9999px,98px,0)
    }

    60% {
        clip: rect(37px,9999px,17px,0)
    }

    70% {
        clip: rect(77px,9999px,34px,0)
    }

    80% {
        clip: rect(55px,9999px,49px,0)
    }

    90% {
        clip: rect(10px,9999px,2px,0)
    }

    to {
        clip: rect(35px,9999px,53px,0)
    }
}

@keyframes scan {
    0%,20%,to {
        height: 0;
        transform: translate(-50%,.44em)
    }

    10%,15% {
        height: 1em;
        line-height: .2em;
        transform: translate(-55%,.09em)
    }
}

The animation of the pseudo-element after before , but only some parameters are changed, as shown below.

 h1:after {
    content: attr(data-t);
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%,.34em);
    height: .5em;
    line-height: .1em;
    width: 100%;
    animation: scan 665ms ease-in-out .59s infinite alternate,glitch-anim .3s ease-in-out infinite alternate;
    overflow: hidden;
    opacity: .8
}

Summarize

So far, our function has been completed. After reading the code, does it feel that it is not very complicated, and it has greatly improved the performance of our page.

The complete code can be viewed at codepen 👉 codepen-404

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)