标签 HTML

浏览器原生img懒加载方案 - Lazy loading Lazy loading，在浏览器滚动像素识别，在首屏的图片先完成加载，其他屏幕外的图片通过将资源标识为非首先加载，从而在需要加载的时候再加载，从而提升网页浏览体验。假如不使用懒加载的情况下，浏览器会默认加载网页所有...

2023-07-25 钧言阅读(3104) 评论(0)

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

2023-03-15 钧言阅读(3334) 评论(0)

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

2023-03-04 钧言阅读(6838) 评论(8)

网页自动适配操作系统/浏览器夜间模式最近在浏览一些博主的网站，发现一个很好玩的效果，当手机浏览器切换到暗色模式后，网页也跟着切换暗色效果，切换白天模式就会切换另外的一个效果，然后用F12深入了解一下，就发现一个prefers-color-scheme这...

2022-12-21 钧言阅读(2433) 评论(1)

使用vanilla-lazyload实现懒加载给主题配置一个全新的lazyload库，来自verlok的vanilla-lazyload开源js库，支持更多的特性和特效。vanilla-lazyload是一个轻量级、灵活的脚本，可将图像、背景、视频、iframe...

2022-05-14 钧言阅读(3404) 评论(4)

CSS 图片显示模糊解决方法旁边的brand的图片明显糊掉，但是设置 height: 100%; ，一样会显示模糊不清。经过一番咨询好友后，得到以下答案并解决了问题。使用 image-rendering 优化CSS 属性 image-rende...

2022-04-10 钧言阅读(2300) 评论(2)

CSS 图片添加高斯模糊渐变特效看见一个挺不错的特效。@-webkit-keyframes blur { 0% { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: b...

2021-07-03 钧言阅读(1577) 评论(0)

typecho生成首页静态化HTML 前几天逛typecho论坛的时候发现了typecho首页静态化的方案，对于网站而言，打开首页的速度决定用户的体验，网站速度超过3秒用户大概率选择离开网站。将动态的首页生成静态化（HTML）就可以极大的提升网站的打开速...

2020-12-12 钧言阅读(2206) 评论(1)

使用CSS打造渐变背景动画最近看见很多网站都使用上了渐变动画，我也来分享一个，纯css3实现一款简单的网页渐变背景动画特效，可以在css属性里修改成你喜欢的渐变颜色值和动画时间。/* 动态渐变特效*/ body { backgroun...

2020-06-28 钧言阅读(2314) 评论(0)

Typecho利用HTML5代码实现本地视频播放 HTML5 Video标签的使用钧言自用Video标签含有src、poster、preload、controls、width、height等几个属性，以及一个内部使用的标签。src属性和poster属性你能想象sr...

2019-09-12 钧言阅读(1533) 评论(0)

HTML在线可视化编辑源码在线可视化编辑支持外链，支持html,php等，扒来的。在线修改代码，源码只有一个html，其它外链都是Bootstrap的。预览新建一个文件，可html,php后缀，复制下面代码放入访问域名+新建文件全称。源代码&...

2019-09-12 钧言阅读(1452) 评论(0)