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

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

前言

我们的博客网站有时候 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;
}

是不是很简单？

推荐下我的开源程序

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

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

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

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