最近给自己博客加了个彩蛋，在我博客评论后，然后再点击评论区自己头像 10 次触发，页面有声音，需要注意下工作时间不要开【已失效，因为换主题了】源码分享里面有三个文件夹，1代 < 2代 < 1代改1代：就是纯背景特效背景音乐以及定时器实现的撅人动画2代：在1代基础上把撅人动画改成了 canvas 实现，canvas 优点就是可以鼠标右键保存撅人图片，虽然不是动图1代改：是在1代基础上让背景特效可以踩点背景音乐了就撅人动画是我写的，背景特效啥的是 AI 写的
JS文件资源提示符normal先加载dom元素，在获取js文件，执行，解析。async边加载dom元素边加载js文件，js文件加载后，不管dom元素是否加载完毕都执行，最后解析。defer边加载dom元素边加载js文件，js等dom加载完成后后执行，最后解析。不使用资源提示符，默认就是normalcss资源提示符用法rel="提示符"，其实不止css可以使用，图片字体什么的也都可以，但一般只用于css。preload在dom加载过程中发现了这个提示符时，就直接获取加载css文件prefetch在dom加载过程中发现这个提示符时，会在浏览器空闲的时候获取加载css文件这两个都是在dom加载的过程中来缓存css，preload优先级较高适合着急用的css。用法<!-- 预载 --> <link rel="preload" href="/css/main.css" as="style"> <!-- 调用 --> <link rel="stylesheet&...
tailwindcss 4.0已经正式发布。安装方式也有一些改变，步骤简单了不少。虽然官方也有安装说明，但是感觉不太适合我，所以自己微调了下，用本文做个记录。安装 Tailwind CSStailwindcss 通过 npm 安装。npm install tailwindcss @tailwindcss/cli将 Tailwind 指令添加到您的 CSS创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：@import "tailwindcss";开始在您的 HTML 中使用 Tailwind将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 来设置您的内容样式。<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
起因我写了个html网页，body部分设置不允许滚动，且高度占满，然后body下面是个div，使用弹性布局flex-1占满页面，允许滚动，然后弄了个表单用于登录，然后发现在手机版safari上，唤醒输入法后，取消输入，页面被顶上去的某部分无法恢复原位置，且手动下滑也不行。视频bug演示解决方法其实百度一搜，发现不止我一个人踩坑，不过好多都是用js修复的，我也懒得实验，加上我这个页面搜索部分的输入框不会有这个问题，猜测和position:fixed属性有关，然后把弹性布局改成了position:fixed定位实现果然没问题了！当然这种方式可能只适合我这种简单项目哈！不怪帮别人说safari是新时代的ie哈，确实坑，而且更新策略还是随系统更新的，否则有bug也不更新
之前在Q群里里面看到群机器人有个生成撅人表情包的功能，如下图所示，当时就在想能不能自己用JS也实现个，但感觉自己这方面一片空白，一直就没弄，直到有次电脑打开了这个表情gif，发现一共就三帧动画，好像也不是很复杂的样子，于是乎就又有动力了。记得在张鑫旭大佬博客看到过生成gif图的文章，搜了下是gif.js库，然后就是引用库，加上ai一顿乱套代码，屎山代码把功能实现了，就是用canvas画三个画布，然后gif.js合并canvas变成gif图。因为canvas我不熟练，代码ai加上自己理解乱弄的很乱，后来想到html2canvas库，我就自己用html布局，然后用html2canvas把html布局变成canvas，最后再用gif.js合并。步骤多了但用html布局舒服多了，代码清晰自己也能看懂了。问题gif.js生成的透明背景图，会导致黑色部分也变透明，实际上他处理过程是把透明背景当成黑色，然后再统一把黑色变透明，导致的这个问题，可以用transparent设置个颜色，然后把它替换成透明而不是把黑色替换成透明，然后html2canvas也可以设置背景色，之前是设置成透明，现在就设置...
最近在网上看视频，发现了个暖心的设计，如下图：最开始没细看，还以为进度条上的图标都是一样的，今天翻出来截图发现，图标姿势并不同，这是这么多年以来看过的最有意思的设计了哈哈?！
首先在网上找到原神logo的svg，确保任何屏幕原神都是高清的。其次就是给xlog自定义css，具体如下：body:after { content: " "; position: fixed; inset: 0; background-color: white; z-index: 999; background-image: url(https://xlog.app/cdn-cgi/image/width=750,quality=75,format=auto,onerror=redirect/https://ipfs.xlog.app/ipfs/bafkreidmbrmalshvlprtzt7qdbk4xtolpvpstvunjogl6o373oplmhcrga); background-repeat: no-repeat; background-position: center; background-size: 30%; animation: fadeOut 3s; a...
前几天无意间访问到了个韩国的动漫视频站，然后看到个页面每个div背景色都不同疑似根据图片进行的取色，然后就想看看他是用什么js设置的，f12一看发现好像不是js，然后我就以为是写死的，想看看怎么写的，结果一看不要紧，学到个骚操作。代码Html部分的核心代码<div class="board"> <div class="images"> <div class="image" style="background-image:url(图1)"></div> <div class="image" style="background-image:url(图2)"></div> <div class="image" style="background-image:url(图3)"></div> </div> <div cl...
tailwindcss 3.0已经正式发布。安装方式也有一些改变。此贴将对3.0的安装方式做一些说明。安装 Tailwind CSStailwindcss 通过 npm 安装，并创建您的 tailwind.config.js 文件。npm install -D tailwindcss npx tailwindcss init配置您的模板路径在 tailwind.config.js 文件中添加所有模板文件的路径。module.exports = { content: ["./src/**/*."], theme: { extend: , }, plugins: [], }将 Tailwind 指令添加到您的 CSS创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：@tailwind base; @tailwind components; @tailwind utilities;开始在您的 HTML 中使用 Tailwind将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind...