[分享]css3搞笑的404动画页面模板

CSS3 可以制作出各种各样的炫酷效果，不止是美观，而且很有趣。今天我们要介绍的是一款 CSS3 搞笑的 404 动画页面模板，让你的网站错了都不难过。/ 404 页面 / .body { anima...

CSS3 可以制作出各种各样的炫酷效果，不止是美观，而且很有趣。今天我们要介绍的是一款 CSS3 搞笑的 404 动画页面模板，让你的网站错了都不难过。

/* 404 页面 */
.body {
  animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
}

/* 振动动画 */
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
} 

以上代码是实现该页面的 CSS3 代码，主要利用了 @keyframes 关键字，定义了 shake 动画，并通过 transform 改变了元素的位置，在不同百分比的时间内进行不同程度的位移。

除此之外，你还可以添加一些有趣的元素比如一些卡通人物或者搞笑的图片，让你的 404 页面更有趣。这个页面一定会让用户感到欣慰，尽管他们找不到他们一开始想看的内容。