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

狂奔滴小马

发布于 2021-11-15 15:00:07

4290

发布于 2021-11-15 15:00:07

文章被收录于专栏：前端专享

效果

实现

在 https://stories.freepik.com/、https://undraw.co/search 等网站下载喜欢的插画，下载格式为svg
将svg 转为Html 网页
观察dom 元素将几个元素添加css3 动画

svg 旋转

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

svg

https

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

svg

https

网络安全

登录后参与评论

0 条评论

热度

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

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

效果

实现

svg 旋转

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

效果

实现

svg 旋转

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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