06 2023 档案
摘要:原文地址:Thinking About The Cut-Out Effect: CSS or SVG? Cut-Out Effect,就是 月牙效果,或者叫,咬一口效果 1. User Avatar 月牙效果 1. 1 - Clip Path Pros Cross-browser, works on
阅读全文
摘要:vscode有3种调试方式 1. auto attach 自动附加2. JavaScript debug terminal3. launch.json配置方式 在vscode的运行和调试面板会有提示 图片 1. auto attach 自动附加 attach 顾名思义,就是附加到已启动的进程,该进程
阅读全文
摘要:1. pv/uv统计 pv: 页面重复浏览量 统计方式,多页面应用通常在页面load事件,单页应用通常在页面路由中 uv: 页面独立访客浏览量 统计方式,pv统计的基础上,添加唯一标识,可以是IP地址,用户浏览器localStorage存储的uuid等。 IP地址存在局域网内的共享一个ip、代理、动
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要:响应时间TTFB 从请求到响应第一个字节的时间 白屏时间FP 从请求到渲染第一个像素点的时间,白屏时间FCP 从请求到页面任意部分完成渲染的时间,灰屏时间LCP 从请求到页面最大内容完成绘制的时间 (通常是指元素在用户可视区域内的可见大小) 交互时间TTI 最早可交互时间 解析时间DCL DOMCo
阅读全文
摘要:1. js的浮点数计算不准确替代方案 例如: 0.1 + 0.2 = 0.30000000000000004 // 应该是 0.3 替代方案 big.js: 提供了十进制的计算,方法略少,但足够使用,体积最小。 bignumber.js:提供了超高精度的数字处理能力,可以解决精度丢失问题。 deci
阅读全文
摘要:1. 新标签,定位遮挡,内容可以移至新标签,或设置其透明度 2. 伪元素,定位遮挡,内容可以移至新标签,或设置其透明度 3. mask遮挡 mask遮挡分为,单mask遮挡,这个没什么好说的,基本用法 还有就是,多mask遮挡 已经使用了一个mask来实现其他效果,这时还需要一个遮挡,隐藏某些位置,
阅读全文
摘要:js中Array的forEach有如下缺点 1. 不支持异步,内部用await无效2. 无法中断,不支持break,continue3. 跳过已删除和未初始化的项4. 不能修改数组项 替代方案 1. map()、filter()、reduce()支持异步,for循环和for of都支持异步 cons
阅读全文
摘要:<div class="seal"> <div class="seal-status">已使用</div> <div>2023.06.09</div> <div>18:59</div> </div> <div class="seal-red"> Draft </div> .seal{ width:
阅读全文
摘要:clipPathUnits 属性用来指定<clipPath>元素内容的坐标系,有2种取值: clipPathUnits = "userSpaceOnUse | objectBoundingBox" clipPathUnits = "userSpaceOnUse | objectBoundingBox
阅读全文
摘要:CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染。它的值可以为 filter 函数 <filter-function> 或使用 url 添加的svg滤镜。 filter: <filter-function> [<filter-functi
阅读全文
摘要:mix-blend-mode 使多重叠元素的颜色发生混合,包括元素与元素,元素与图片 background-blend-mode 使得多个背景发生混合,包括背景图与背景图,背景图与背景色 isolation: isolate 可以创建层叠上下文,就可以阻断mix-blend-mode,使多个元素能分
阅读全文
摘要:1. 直接修改svg文件中fill属性 2. 使用css修改svg图标的fill属性 仅对内联svg有效 3. 使用currentColor 只对html中内联的svg有效,包括symbol和use,对background中svg无效 修改svg文件中的fill属性为currentColor,在父级
阅读全文
摘要:clipPath 剪切 clipPath 剪切路径范围内是显示的,否则是不显示的 <svg xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 定义一个clipPath,值为moon --> <clipPath id="moon"> <circle cx=
阅读全文
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要:1. 使用attr引用父元素属性 <li data-name="小明"> li::after { content: attr(data-name); } 2. 非content属性可以直接引用css变量 <li style="--width: '40px'"></li> li::after { co
阅读全文
摘要:// 基于单key或无key去重,单key一般是对象的id,无key就是元素本身是非对象 export function uniqueArr(arr, key){ let res; if(key){ res = [...new Map(arr.map(t => [t[key], t])).value
阅读全文