SVG + 动画 实现一个有个性的404页面

前言

我们的博客网站有时候 404 页面比较普通，我们可以通过 SVG 加动画来实现一个有个性的页面

效果

代码片段

实现

• 在undraw网站下载喜欢的插画，下载格式为 svg

• 将 svg 转为 HTML 网页

• 观察 dom 元素将几个元素添加 css3 动画

svg 旋转

左 HTML 元素，右 SVG 元素

看了张鑫旭老师的博客《理解 SVG transform 坐标变换》，由于 SVG 元素的默认是 SVG 左上角为中心变换的。 实现 SVG 元素居中缩放的效果，可以使用 translate 手动偏移，先偏移回原点，缩放旋转后再偏移回来。

下面是主要 css 代码

@keyframes movecard {
  0% {
    transform: translate(340px, 135px) rotate(-8deg) translate(-340px, -135px);
  }
  100% {
    transform: translate(340px, 135px) rotate(8deg) translate(-340px, -135px);
  }
}
.card {
  animation: movecard 5s ease-in infinite alternate;
}

是不是很简单？

推荐下我的开源程序

• https://editor.runjs.cool/ MDX 排版编辑器
• https://cv.runjs.cool/ 在线简历生成器
• https://low-code.runjs.cool/ 简易版低代码平台

若对你有帮助记得点个 star，感谢！

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

本文首发掘金平台，来源小马博客