前端

最近有空给网站除草了，在这里也做了一些小优化，添加网站背景图片看起来不这么单调。 简单记录折腾日志。 添加渐变背景 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，在浏览器滚动像素识别，在首屏的图片先完成加载，其他屏幕外的图片通过将资源标识为非首先加载，从而在需要加载的时候再加载，从而提升网页浏览体验。 ...

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

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

看见一个挺不错的特效。 1@-webkit-keyframes blur { 2 0% { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } 3 50% { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 4 100% { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); } 5} 6 7.div img { 8border-radius: 4px; /*圆角*/ 9box-shadow: 10px 7px 13px #888885; /*立体感 阴影*/ 10-webkit-animation-name: blur; /*动画名称*/ 11-webkit-animation-duration: 3s; /*动画持续时间*/ 12-webkit-animation-iteration-count: 1; /*动画次数*/ 13-webkit-animation-delay: 0s; /*延迟时间*/ 14} 15.div img:hover { 16-webkit-filter: grayscale(100%); /*鼠标经过变黑白*/ 17} 白嫖大佬的文章：清墨的橙

之前我都是用 Typecho文章图片添加灯箱效果 这个教程。发现渐渐不能满足我DIY的需要。 FancyBox是一款优秀的弹出框Jquery插件 允许我们用鼠标和键盘上的四个方向键切换图片 可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放 支持缩略图列表、放大、全屏等功能 弹出框支持显示多种类型的内容：图片、html、视频… 支持触控、缩放手势操作图片 实现FancyBox效果 先引入相关的文件 建议放在 fooder.php 底部 </baby> 之前添加 ...

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