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

sxkk20082年前知识分享114

前言

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

是不是很简单?

推荐下我的开源程序

若对你有帮助记得点个 star,感谢!

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

本文首发掘金平台,来源Ai知识分享博客

相关文章

使用AI检测技术的重要性及应用领域探索

使用AI检测技术的重要性及应用领域探索

  随着人工智能(AI)技术的快速发展,以AI检测为中心的应用逐渐成为社会各个领域的热点。AI检测利用计算机视觉和深度学习等算法,通过自动分析和理解图像、视频或声音等数据,从...

智能家居行业:改变生活方方面面

智能家居行业:改变生活方方面面

  智能家居行业的发展与创新在过去几年里突飞猛进,逐渐改变了我们的生活方式。智能家居系统通过连接和控制家庭设备,使得我们的生活更加安全、便利和舒适。  首先,智能家居系统提供...

AI人工智能技术的发展,构建更加智慧、平等、可持续的社会。

AI人工智能技术的发展,构建更加智慧、平等、可持续的社会。

  人工智能是近年来备受关注的前沿技术之一,其应用范围涉及医疗、金融、教育等多个领域,改变了人们的生活和工作方式。AI的发展史可以追溯到上世纪50年代,但直到近年来,随着数据...

AI绘画的技术与未来

AI绘画的技术与未来

  AI(人工智能)绘画是一项新兴技术,正逐渐地在艺术领域走进人们的视线。AI绘画通过人工智能算法实现图像创作,其灵活性和创新性使得越来越多的艺术家开始使用它来创作作品。今天...

AI技术在全球经济和社会中的应用现状

AI技术在全球经济和社会中的应用现状

  随着人工智能技术的快速发展,针对人工智能技术的商业应用变得越来越丰富和普遍。当前,AI技术被广泛应用于医疗、金融、教育、娱乐等领域中。本文将深入探讨AI技术在不同领域中的...

【对话ChatGPT】如何提高网站的访问量?

上周给博客开通的 Google adsense,收益比微信公众号好一些,收益跟访问量成正比,于是我问了 ChatGPT 这个问题。如何提高网站访问量?以下是一些提高网站访问量的方法:优化 SEO:搜索...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。