SVG + 动画实现一个有个性的404页面-阿里云开发者社区

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

2022-06-20 164

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我正在参加码上掘金体验活动，详情：[show出你的创意代码块]，我们的博客网站有时候 404页面比较普通，我们可以通过SVG 加动画来实现一个有个性的页面。

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

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

前言

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

效果

代码片段

实现

在undraw网站下载喜欢的插画，下载格式为 svg
将svg 转为 HTML 网页
观察dom 元素将几个元素添加css3 动画

svg 旋转

SVG transform

左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;
}