CSS动画篇之404动画

当前页面无法访问，可能没有权限或已删除。 作为一个从事互联网行业的你是不是见过各种各种的404页面，今天刚好发现一个比较有趣的404页面，如上图所示，是不是感觉挺炫酷呢，本文将和大家分享一下实现原理。

前言

看到上面的404你的第一感觉会是这么做呢？

来，UI同学给我上GIF。
当然这种方式对于前端同学来说肯定是最简单的实现方式，单纯的加载一张图片即可。

但是对于一个有追求的前端，绝对不会答应这么干，加载一张GIF图片的成本太高了，网络差的情况下会导致白屏时间过长，所以我们尽可能的用代码实现，减少这种不必要的网络请求。

实现

当你仔细看这个动画的时候可以发现其实主体只有一个标签，内容就是404，另外的几个动画都是基于这个主体实现，所以我们先写好这个最简单的html代码。

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

复制代码

细心的同学应该看到了我们自定义了一个熟悉data-t，这个我们后续在css中会用到，接下来实现主体的动画效果，主要的动画效果就是让主体抖动并增加模糊的效果，代码实现如下所示。

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)

  }

}

复制代码

接下来增加主体动画后面子两个子动画内容，基于伪元素实现，伪元素的内容通过上面html中自定义data-t获取，主要还用了clip中的rect，具体css代码如下。

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)

    }

}

复制代码

伪元素after的动画与before中的一致，只是部分参数改动，如下所示。

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

}

复制代码

总结

到此为止我们的功能就实现完成啦，看完代码是不是感觉并没有很复杂，又为我们的页面性能提升了大大的一步。

完整的代码可以访问codepen查看 👉 codepen-404