分享自己新做的主页，太空主题
前言
在Codepen上转的时候看到了一个很厉害的2.5D动态地球，突然有了灵感，就用两天做了个个人网站。
太空主题，页脚是根据一个月球的svg画的，感觉就像站在月球上一样，背景就是找到的那个动态地球了，还加上了一些动态的小星星。
其他元素像加载动画和其他文字都是用的Tailwindcss做的，动画都是用在hover上的，手机端没有鼠标，所以相应的动画就显示不了。
网站标题为在互联网留下一个脚印,因为想到了第一个登上月球的人说的那句话。
截图
链接
网站： 在互联网留下一个脚印 | 天影大侠
同时也放在Gtihub上了，也分享一下
Github：SkyShadowHero-Space-Themed-Website
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 天影大侠的小站！
相关推荐
2025-05-01
分享一个网站飘落雪花样式
分享一个网站飘落雪花样式，效果如本页面所示，可和鼠标手指等有简单躲避互动 使用方法：在页面head或body里插入这三行即可 123<div><canvas id="snow" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;pointer-events:none"></canvas></div><script>const notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));</script><script async...
2025-07-10
博客首页大图模糊渐进式加载和夜间模式遮罩
前言修改博客时觉得主页大图加载太慢，而且为了加载快一点已经把图片弄得很糊了，效果还是不好正好发现了这位大佬的文章，首页背景图渐进式加载，解决卡顿难题正好解决了加载过慢和图片不能太清晰的问题但夜间模式下的深色遮罩又没了，所以分享一下解决方法安知鱼和butterfly主题适用 首页背景图渐进式加载（转载）新建文件新建文件source/js/imgloaded.js新增以下内容，并按照注释调整图片路径 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798// 首页头图加载优化/** * @description 实现medium的渐进加载背景的效果 */class ProgressiveLoad { constructor(smallSrc,...
2023-07-15
给你的网站添加个页面加载进度条
大家好无意中发现了一个能制作自动页面加载进度条的网页测试了一下，效果不错发来给大家试试网站在这：https://codebyzach.github.io/pace/进入后会有一个既炫酷又平平无奇的加载动画向下翻可以看到预设的一些加载动画先选择颜色，再选择样式样式随便选一个，就loading bar吧点击DOWNLOAD然后将它放在你的网站上，我就放在https://skyshadowhero.github.io/css/loading-bar.css里的然后复制网站中Get Start里中间的的代码，并将红色方框里的路径改为你所放的css文件路径然后将编辑好的代码放进html文件里的标签前即可 如果使用的Hexo+Butterfly搭建博客的话可以直接将此两行代码放在_config.butterfly.yml里的相关位置在bash中输入hexo g -d后进入网页，你的页面加载进度条就出现了效果如下图：
评论
