关于css: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

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）