失眠先生
(开发中)
To
个人页
随笔
主页
Github
碎语
计划
编辑器
管理员
21
分类
28
标签
47
技术
52
归档
朋友
关于
一些前端示例
花间一壶酒，独酌无相亲。举杯邀明月，对影成三人。
0 示例
图片颜色渐变
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Public:图片颜色渐变</title> </head> <body>asd <!-- https://esm.sh/ --> <script type="importmap"> { "imports": { "color-thief": "https://esm.sh/color-thief@2.2.5" } } </script> <script type="module"> // 引入 color-thief 库 import ColorThief from 'color-thief' const colorThief = new ColorThief() function createColorBlurBackground(imageUrl) { // 加载图片 const img = new Image() img.src = imageUrl img.setAttribute('crossOrigin', ''); // 等待图片加载完成后执行操作 img.onload = function () { // 创建一个canvas元素 const canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height // 在canvas上绘制图片 const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) // 获取图像的每个区域的平均颜色 const colors = [] for (let x = 0; x < img.width; x += 10) { for (let y = 0; y < img.height; y += 10) { // 这个colorThief使用有问题 const color = colorThief.getColor(canvas, x, y) colors.push(color) } } // 根据平均颜色创建一个大致的颜色模糊背景 const backgroundImageData = ctx.createImageData( canvas.width, canvas.height ) let i = 0 for (let x = 0; x < canvas.width; x++) { for (let y = 0; y < canvas.height; y++) { const r = colors[i][0] const g = colors[i][1] const b = colors[i][2] backgroundImageData.data[i * 4] = r backgroundImageData.data[i * 4 + 1] = g backgroundImageData.data[i * 4 + 2] = b backgroundImageData.data[i * 4 + 3] = 255 i++ } } ctx.putImageData(backgroundImageData, 0, 0) // 将背景图像设置为页面的背景图像 document.body.style.backgroundImage = `url(${canvas.toDataURL()})` } } // createColorBlurBackground("https://w.wallhaven.cc/full/9d/wallhaven-9dz1e8.jpg") // createColorBlurBackground("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png") </script> </body> </html>
评论加载中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Public: 评论加载中</title> </head> <body> <style> div:after { content: ""; animation: aa 1.2s ease-in infinite; } @keyframes aa { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 100% { content: "..."; } } </style> <div>评论加载中</div> </body> </html>
展开
swup
Swup Demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Public:Swup Demo</title> <link rel="stylesheet" href="base.css" /> <link rel="stylesheet" href="transitions.css" /> <script type="module" src="swup.js"></script> </head> <body> <div class="layout"> <header class="header"> <a href="https://swup.js.org" target="_blank" class="logo">Swup Demo</a> </header> <main id="swup" class="transition-main"> <h1> <span>Fade Animations</span> <span>With Swup</span> </h1> <p> A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend. </p> <p class="buttons"> <a href="./next.html" class="button">Next page →</a> </p> </main> </div> </body> </html>
展开
vue示例
仿3D效果旋转菜单
dsfds ## sada asd
展开
代码示例
一个默认配置继承函数
## 一个默认配置继承函数
展开
字体/HarmonyOS
鸿蒙字体展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Public:鸿蒙字体展示</title> <style> @font-face { font-family: 'HarmonyOS_Sans_SC_Medium'; src: url('./HarmonyOS_Sans_SC_Medium.woff') format('woff'); font-weight: normal; font-display: swap; } .output { font-family: 'HarmonyOS_Sans_SC_Medium'; } </style> </head> <body> <h2>文档</h2> <p>将鸿蒙字体ttf转化为woff使用</p> <ul> <li><a href="https://developer.harmonyos.com/cn/design/resource" target="_blank">前往鸿蒙字体资源站</a></li> <li>工具：<a href="https://convertio.co/zh/ttf-woff/" target="_blank">ttf-woff</a></li> </ul> <hr> <h2>结果</h2> <div class="output"> 大仙加到wewewad阿萨大大萨达撒的撒的第三方 韩国和关键环节客户，。、asdadasd2asdaasad a <code> console.log("asda") </code> </div> </body> </html>
展开
常见网页问题
flex 1+width 0
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Public:flex 1+width 0</title> </head> <body> <p> 这取决于flex的剩余空间大小分配方式，如果没有设置width,当内部元素的内容大小超过平均分配的剩余空间时,元素的宽度等于内容大小,如果设置了width并且这个width的大小小于平均分配的剩余空间大小时,取平均分配的剩余空间; 当flex设置为 1 时 相当于 剩余空间大小 = 父元素的宽度 因此 平均的剩余空间大小等于 = 父元素的宽度 / 元素的个数 直接设置width为0可以保证元素宽度平分父元素宽度。 </p> <h2>没有width：0的效果：</h2> <div style=" display: flex; background-color: red; height: 300px; gap: 5px; flex-wrap: wrap; " > <div style="flex: 1; background: green; height: 120px;"> <div style=" text-overflow: ellipsis; overflow: hidden; white-space: nowrap; " > 撒范德萨范德萨发顺丰撒范德萨范德萨发顺丰撒范德萨范德萨发顺丰 </div> </div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> </div> <h2>有的效果：</h2> <div style=" display: flex; background-color: red; height: 300px; gap: 5px; flex-wrap: wrap; " > <div style="flex: 1; background: green; height: 120px; width: 0"> <div style=" text-overflow: ellipsis; overflow: hidden; white-space: nowrap; " > 撒范德萨范德萨发顺丰撒范德萨范德萨发顺丰撒范德萨范德萨发顺丰 </div> </div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> <div style="flex: 1; background: green; height: 120px"></div> </div> <!-- https://esm.sh/ --> <script type="importmap"> { "imports": {} } </script> <script type="module"></script> </body> </html>
高度未继承问题
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Public:高度未继承问题</title> <style> .parent { width: 400px; background-color: green; } .child { background-color: red; height: 100%; } </style> </head> <body> <p>本意上就是只父元素的height不对，例如制定了min-height，子元素指定height也是不会继承的。</p> <div style="display: flex;height: 800px;"> <div class="parent"> <div style="min-height: 100%;"> <div class="child"></div> </div> </div> </div> <!-- https://esm.sh/ --> <script type="importmap"> { "imports": {} } </script> <script type="module"></script> </body> </html>
展开
效果
简易滑块对比
类似图片的对比效果之类的
展开
效果
源码
暂无展示
目录树
$tips
如何借助content属性显示css var变量值
md测试文档
hexo-theme-next
next主题动画解析
inversifyJS
inversifyjs的使用方式
nuxt
nuxt的自动导入
unified
如何将一个md文档按h2和h3分块
unified基础概念
vscode
vscode的事件机制
win11
wsl使用clash的代理
其他
获取央视屏的直播源
vscode终端和本地cmd输出不一致
windows cmd永久设置utf-8编码
前端
给ant-design-vue的table中的空白格添加默认值
刷新iframe的几个方法
什么是importmaps
img实现图片加载前默认图片
vite是怎么使用additionaldata的
js判断页面是否被iframe嵌套
bun-最快的js运行时
CSS
纯css实现展开和收藏
图标与文字对齐
min-height不能继承的问题
bfc的一些知识点
JS
彻底搞懂js事件冒泡与捕获
js执行顺序示例
Vue
折磨的consolelog与watch导致的问题
vue的一些注意点
Vue2
nexttick原理
diff算法
Vue3
有关computed的各种详细操作
vmodeltext的探究
功能
浏览器表单自动填充问题
面试
浏览器输入url后经历的过程
什么是跨域
tcp协议的连接建立过程和释放过程简单介绍
博客
集成评论框
给astro添加browserslist支持
增加mdx并且全局注入组件
可能因为hyper-v动态端口的占用导致clash出现proxy错误
怎么阅读开源项目
知识
创建win10符号链接权限问题
脚本
油猴为csdn开启沉浸式与可复制操作
随笔
链式promise调用
数值显示
nodejs流式数据示例
nodejs-streams流式数据处理
index
git本地忽略不想提交的文件
上一个
下一个
