写点什么

CSS 动画篇之 404 动画

作者:南城FE
  • 2022 年 7 月 19 日
  • 本文字数:1601 字

    阅读完需:约 5 分钟


当前页面无法访问,可能没有权限或已删除。 作为一个从事互联网行业的你是不是见过各种各种的 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

用户头像

南城FE

关注

还未添加个人签名 2019.02.12 加入

专注前端开发,分享前端知识

评论

发布
暂无评论
CSS动画篇之404动画_CSS_南城FE_InfoQ写作社区