资源分享

最近有空给网站除草了，在这里也做了一些小优化，添加网站背景图片看起来不这么单调。 简单记录折腾日志。 添加渐变背景 1body::before { 2 content: ''; 3 position: fixed; 4 top: 0; 5 left: 0; 6 right: 0; 7 bottom: 0; 8 z-index: -520; 9 pointer-events: none; 10} 11body::before { 12 background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/ 13} 添加背景图片 1body::before { 2 content: ''; 3 position: fixed; 4 top: 0; 5 left: 0; 6 right: 0; 7 bottom: 0; 8 z-index: -520; 9 pointer-events: none; 10} 11body::before { 12 background-image: url(/img/1.avif);/* 这里设置图片 */ 13 background-repeat: no-repeat; 14 background-size: cover; 15} 添加动态渐变背景 1body::before { 2 content: ''; 3 position: fixed; 4 top: 0; 5 left: 0; 6 right: 0; 7 bottom: 0; 8 z-index: -520; 9 pointer-events: none; 10} 11body::before { 12 background: linear-gradient( 90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)); /*背景颜色*/ 13 background-size: 500%; 14 animation: bgAnimation 15s linear infinite; /*执行动画*/ 15} 16@keyframes bgAnimation{ 17 0%{ 18 background-position: 0% 50%; 19 } 20 50%{ 21 background-position: 100% 50%; 22 } 23 100%{ 24 background-position: 0% 50%; 25 } 26}

Lazy loading，在浏览器滚动像素识别，在首屏的图片先完成加载，其他屏幕外的图片通过将资源标识为非首先加载，从而在需要加载的时候再加载，从而提升网页浏览体验。 ...

Navidrome是开源的音乐服务器，它可以把硬盘的音乐文件以流媒体的方式呈现出来，就可以在任何的浏览器收听自己的音乐，并兼容subsonic API接口，也可以在第三方的客户端，最终在PC和手机，平板上实现全平台的音乐输出。 ...

之前不是介绍过了自建的zerotier控制器，这一次就想在路由器上安装zerotier实现访问内网的设备，不用每一个设备都安装上。如果是在路由器上还是要替换成自建的planet文件，不然就是使用官方的节点转发。 ...

在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。 准备工作 作者的主页：PACE 在head标签之内引入相对应的JS和CSS ...

逛知乎的时候，常看到卡片式的链接。卡片式链接不仅直观显示出网址、标题、网站的头像等等信息。 这个方案是看到目的地 的文章，我这里也测试了一下。 引入JS GitHub：Lete114/CardLink ...

最近在浏览一些博主的网站，发现一个很好玩的效果，当手机浏览器切换到暗色模式后，网页也跟着切换暗色效果，切换白天模式就会切换另外的一个效果，然后用F12深入了解一下，就发现一个prefers-color-scheme这个新的css类，以前没有了解过，赶紧上网查一下。 ...

很久就想实现一个文章自定义样式，就是懒就没有行动。这一次是想完善仿的DUX的一个文章样式，之前看到就是文章加头图看多就腻了，看见最新版本的大前端主题有无图模式，就想扒下来。 ...