CSS动画篇之404动画

最新推荐文章于 2024-01-26 13:46:22 发布

AI画手小王

最新推荐文章于 2024-01-26 13:46:22 发布

阅读量477

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/qq_53225741/article/details/124945580

版权

本文介绍了如何使用CSS动画技术来实现404错误页面的动态效果，以替代加载GIF图片，降低网络请求，提升页面性能。通过分析动画原理，详细展示了如何创建抖动并带有模糊效果的404文字以及利用伪元素添加额外动画。

摘要由CSDN通过智能技术生成

前言

看到上面的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)
  }