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

是不是很简单？

推荐下我的开源程序

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

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

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