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，感谢！
以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
本文首发掘金平台，来源Ai知识分享博客
