前端

使用css给网站添加一个背景

最近有空给网站除草了，在这里也做了一些小优化，添加网站背景图片看起来不这么单调。 简单记录折腾日志。 添加渐变背景 CSS 折叠 复制 body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; …

2024 年 07 月 13 日

1 分钟

浏览器原生img懒加载方案 - Lazy loading

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

2023 年 07 月 25 日

1 分钟

使用 CardLink 生成卡片式链接

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

2023 年 03 月 04 日

2 分钟

CSS 图片显示模糊解决方法

旁边的brand的图片明显糊掉，但是设置 height: 100%; ，一样会显示模糊不清。经过一番咨询好友后，得到以下答案并解决了问题。 使用 image-rendering 优化 CSS 属性 image-rendering 用于设置图像缩放算法。它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

2022 年 04 月 10 日

1 分钟

CSS 图片添加高斯模糊渐变特效

看见一个挺不错的特效。 CSS 折叠 复制 @-webkit-keyframes blur { 0% { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: …

2021 年 07 月 03 日

1 分钟

利用JS给图片添加fancybox灯箱效果

之前我都是用 Typecho文章图片添加灯箱效果 这个教程。发现渐渐不能满足我DIY的需要。 FancyBox是一款优秀的弹出框Jquery插件 允许我们用鼠标和键盘上的四个方向键切换图片 可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放 支持缩略图列表、放大、全屏等功能 …

2019 年 08 月 27 日

2 分钟

实现网站页面秒开-预加载JS脚本instant.page

instant.page 原理的话我们不必深层了解，只需知道： 在用户点击网站链接之前，他们将鼠标悬停在该链接上。当用户徘徊65毫秒时，他们将点击该链接有两个机会，因此 instant.page 此时开始预加载，平均超过 300 毫秒，以便页面预加载。

2019 年 08 月 23 日

2 分钟