找到
54
篇与
Web前端
相关的结果
- 第 2 页
-
告别 <div>：7 种语义化 HTML 标签提升代码质量 在开发 Web 应用时，项目往往从简单开始，但随着需求的增长，文档结构会变得复杂起来。 div 标签虽然灵活，但滥用会导致代码杂乱、难以维护。原因在于 div 是纯粹的容器，没有任何语义意义。 幸好，HTML 提供了语义化标签这一优雅的解决方案。 根据 W3Schools 的定义：语义化元素是带有明确意义的 HTML 元素。它们不仅能让浏览器理解，还能清晰地传达意图给开发者和用户。 图片 为什么要使用语义化标签？ 提升可访问性：语义化标签帮助辅助技术（如屏幕阅读器）更好地导航内容。 增强 SEO：搜索引擎能更准确地理解内容结构，提高页面排名。 易维护性和可读性：清晰的代码结构更易阅读和协作。 减少代码冗余：更少的额外类名或属性，代码更简洁。 总之，除非别无选择，尽量少用 <div>。 下面是 7 个可以替代 <div> 的语义化标签及其应用场景。 1. section：组织相关内容 <section> 用于将相关内容分组，就像书中的章节，每个部分围绕特定主题。 示例： <section> <h2>我们的服务</h2> <p>我们提供网站开发、设计和营销等多种服务，助您取得成功。</p> </section>2. article：独立的内容单元 <article> 适合表示独立的内容单元，例如文章、博客或新闻条目。 示例： <article> <h3>早晨锻炼的好处</h3> <p>晨练可以提升能量，改善心情，是开启一天的绝佳方式。</p> </article>3. nav：导航链接 <nav> 用于定义导航区域，就像网站的目录或地图，指引用户浏览站点。 示例： <nav> <ul> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav>4. header：头部内容 <header> 用于页面或部分内容的头部区域，通常包括标题和导航。 示例： <header> <h1>我的个人博客</h1> <p>分享世界各地的故事与见解。</p> </header>5. footer：底部内容 <footer> 用于表示页面或部分内容的底部，通常包括版权声明、联系信息等。 示例： <footer> <p>© 2024 我的个人博客。保留所有权利。</p> <a href="#privacy-policy">隐私政策</a> </footer>6. main：主要内容区域 <main> 用于包含网页的主要内容，不包括头部、底部或侧边栏。 示例： <main> <h2>欢迎访问我们的网站</h2> <p>我们为您提供量身定制的解决方案。</p> </main>7. aside：补充内容 <aside> 用于表示与主内容间接相关的信息，例如侧边栏或附加说明。 示例： <aside> <h4>相关文章</h4> <ul> <li><a href="#article1">改善睡眠的 10 个小技巧</a></li> <li><a href="#article2">经济实惠的健康饮食指南</a></li> </ul> </aside>可视化：语义化标签的页面结构 使用语义化标签构建页面时，页面结构会更加清晰。例如： <header>...</header> <nav>...</nav> <main> <section>...</section> <article>...</article> <aside>...</aside> </main> <footer>...</footer>这样不仅方便开发人员理解页面布局，还能让搜索引擎和辅助设备更好地解析内容。 结论 滥用 <div> 会导致代码冗杂且不易维护。通过使用 <section>、<article>、<nav>、<header>、<footer>、<main> 和 <aside> 等语义化标签，你可以创建更清晰、更具可读性和更高效的网页结构。 记住：除非没有合适的语义化标签，否则尽量少用 <div>！
-
您应该了解的新 CSS 功能 这篇文章介绍了现代 CSS 的一些新特性，帮助开发者提升网页开发效率和视觉效果，尤其是在布局、动画、性能优化等方面。随着 Web 开发的不断进化，CSS 不仅仅是一个样式语言，它已经成为了一个强大的工具，可以用来创建复杂的布局、动画和交互效果。图片 @scope 一种新的 CSS 规则，用于为选择器定义作用域，使得开发者可以更轻松地在特定的 DOM 子树内应用样式，而不会影响到外部元素。这对于组件化架构、第三方库和大项目的协作开发尤为有用。 <div id="componentA"> <p>This paragraph is inside the scope.</p> </div> <p>This paragraph is outside the scope.</p> <style> @scope (#componentA) { p { color: green; } } </style>在这个例子中，只有 #componentA 内部的段落文字会变成绿色，而外部的段落不会受到影响。 @supports CSS 的功能检测机制，可以根据浏览器是否支持某个 CSS 属性来有条件地应用样式，保证在不同浏览器环境下都能有良好的回退处理。 @supports (display: grid) { .grid-container > * { text-shadow: 0 0 2px red; float: none; } }只有当浏览器支持 display: grid 时，才会应用内部的样式，避免不支持的环境下出现问题。 content-visibility 这项性能优化特性可以在元素不可见时跳过渲染，提高页面加载和渲染的性能，非常适合长列表、复杂布局和图片重度页面。 .content-section { content-visibility: auto; contain-intrinsic-size: auto 500px; }如果元素不在视口内，浏览器将跳过渲染这些内容，从而加速页面加载。contain-intrinsic-size 为内容提供一个估算的尺寸，避免布局偏移。 aspect-ratio 控制元素的宽高比，确保元素在不同屏幕尺寸和布局条件下保持一致的比例，尤其对于响应式图片和视频非常有用。 img { display: inline; width: 300px; background-color: #f0f0f0; vertical-align: top; aspect-ratio: 16 / 9; }在这个例子中，图片会保持 16:9 的宽高比，确保即使在不同的容器大小下也不会变形。 @keyframes 和 @starting-style @keyframes 用于创建复杂的动画序列，@starting-style 解决了 CSS 过渡和动画的初始状态问题，确保动画平滑开始。 @keyframes slideIn { from { transform: translateX(-100%); opacity: 0; } 50% { opacity: 0.5; } to { transform: translateX(0); opacity: 1; } } .animated-box { animation: slideIn 3s ease-in-out; }这里定义了一个 slideIn 动画，使元素从左侧滑入并逐渐显示。 offset-position 和 offset-path 用于控制元素沿自定义路径运动的位置，这为复杂的路径动画提供了更精确的控制，适合滚动绑定动画、互动效果和自定义光标。 .moving-object { offset-path: path("M 0 0 L 200 200 L 400 0"); offset-position: 25%25%; animation: pathMotion 5s linear infinite; } @keyframes pathMotion { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }在这个例子中，元素沿着一个折线路径移动，从而实现精确的动画控制。 image-set() 为不同设备像素密度选择最合适的图片，提升响应式设计的效果，同时优化性能，减少带宽消耗。 .responsive-box { width: 500px; height: 250px; background-repeat: no-repeat; background-size: cover; background-image: image-set( url("image-lowres.jpg") 1x, url("image-highres.jpg") 2x ); }在这个例子中，标准分辨率的设备将加载 image-lowres.jpg，而高分辨率设备（例如 Retina 显示屏）将加载 image-highres.jpg。 @property CSS Houdini API 的一部分，允许开发者定义和约束自定义 CSS 属性，使得这些属性在动画时更加流畅，能够支持设计系统、主题切换和响应式排版。 @property --main-color { syntax: '<color>'; inherits: false; initial-value: #00ff00; } .color-box { background-color: var(--main-color); transition: --main-color 0.5s; } .color-box:hover { --main-color: #ff0000; }这个示例展示了如何创建一个自定义颜色属性，并在鼠标悬停时平滑地过渡到新颜色。 text-wrap 和 white-space-collapse 提供了更细致的文本换行控制，可以优化长文本内容的显示效果，提升可读性，避免页面布局的跳动。 .balanced-text { text-wrap: balance; text-align: justify; } .preserved-space-text { text-wrap: pretty; }balanced-text 类会使段落尽可能均匀分布文本，而 preserved-space-text 类则会优化文本换行，避免出现孤立或寡头字。 结论 这些现代 CSS 特性不仅为开发者提供了更多的灵活性和控制，还能够在提升性能、减少代码冲突、优化用户体验等方面发挥重要作用。通过学习和掌握这些功能，开发者可以创建出更加高效、灵活且视觉上令人惊艳的网页应用。赶快开始尝试这些新特性吧，构建未来感十足的网页！
-
深入浅析 JavaScript 节流函数的四种实现方式（Throttle） 深入浅析 本文将详细探讨 JavaScript 中的节流函数（Throttle），并提供四种不同实现方式的代码示例及详细解释。 节流函数用于限制函数在一定时间内执行的次数，防止函数被频繁调用导致性能问题。这在处理高频事件（例如滚动事件、鼠标移动事件等）时非常有用。 想象一下沙漏：沙子不断流入，但流出的沙子数量有限。节流函数的工作原理类似，它控制函数执行的频率，避免函数被瞬间大量调用。 图片 节流函数的典型应用场景包括： 鼠标点击事件: 防止用户快速连续点击导致多次执行同一操作。 滚动事件: 在页面滚动时，节流可以限制加载更多内容的请求频率，避免频繁请求造成服务器压力。 输入框监听: 限制搜索或自动完成请求的频率，优化用户体验。 节流与防抖的差异 在之前的文章中，我们介绍了防抖函数（Debounce）。节流与防抖虽然都能降低函数执行频率，但它们的工作机制有所不同： 节流: 在规定时间间隔内，无论事件触发多少次，函数最多只执行一次。 时间间隔主要指两次函数执行之间的时间差。 防抖: 在事件停止触发后的一个规定时间内，函数只执行一次。 时间间隔则指连续触发事件的持续时间。 四种节流函数实现方式 我们将分别介绍四种常见的节流函数实现：时间戳版、定时器版、组合版以及高级自定义版。 1. 时间戳版节流 这种方法通过记录上一次函数执行的时间戳来判断是否需要执行函数。它能保证函数在规定时间间隔后立即执行。 const throttle = (func, wait) => { // 初始化事件开始的时间为0 let preTime = 0; return function() { // 下面两行不懂的可以看看防抖实现的那篇文章 let context = this; let args = arguments; // 获取当前的时间，使用+来转化为数字类型，方便后面做减法 let now = +new Date(); // 当前时间减去之前的时间，结果大于设定的间隔时间才会执行函数 if (now - preTime > wait) { func.apply(context, args); preTime = now; } } };2. 定时器版节流 该方法利用setTimeout来控制函数的执行。 函数不会立即执行，而是在规定时间间隔后执行。通常用于在事件停止触发后执行一次操作。 const throttle2 = (func, wait) => { let timeout; return function() { let context = this; let args = arguments; // 若没有定时器，说明上一次设定的定时器已到时销毁 if (!timeout) { timeout = setTimeout(function() { func.apply(context, args); timeout = null; }, wait) } } };3. 组合版节流 结合时间戳版和定时器版，可以实现更灵活的节流：既可以在时间间隔到期时立即执行，又可以在事件停止触发后执行一次。 function throttle3(func, wait){ let context, args, timeout; let pretime = 0; let later = function(){ pretime = +new Date(); timeout = null; func.apply(context, args); }; let throttled = function(){ context = this; args = arguments; var now = +new Date(); var remaining = wait - (now - pretime); // 剩余时间为负数表示下一次执行需要立即执行 // remaining > wait在修改了系统时间的情况下可能发生 if(remaining <= 0 || remaining > wait){ // 如果有设置过定时器，清空并置为null if(timeout){ clearTimeout(timeout) timeout = null; } pretime = now; func.apply(context,args); }else if(!timeout){ // 需要在剩余时间后执行 timeout = setTimeout(later,remaining); } }; return throttled; };4. 高级自定义版节流 此版本允许通过配置参数 options 来控制函数的执行时机，更加灵活： leading: false：禁用首次执行。 trailing: false：禁用最后一次执行。 /** * 高级自定义节流函数，限制函数在指定时间段内最多执行一次。 * * @param {Function} func - 要节流的函数。 * @param {number} wait - 节流时间间隔（毫秒）。 * @param {object} [options] - 可选参数。 * @param {boolean} [options.leading=true] - 是否允许在节流时间段开始时立即执行函数。 * @param {boolean} [options.trailing=true] - 是否允许在节流时间段结束时执行函数。 * @returns {Function} 节流后的函数。该函数包含一个 `cancel` 方法用于取消任何待定的执行。 */ function throttle(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; const later = function () { previous = options.leading === false ? 0 : now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; const throttled = function () { var _now = now(); if (!previous && options.leading === false) previous = _now; var remaining = wait - (_now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = _now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; }; throttled.cancel = function () { clearTimeout(timeout); previous = 0; timeout = context = args = null; }; return throttled; }这个版本还包含cancel方法，用于取消任何待定的执行。 总结 本文详细介绍了四种 JavaScript 节流函数的实现方式，从简单的计时器方法到更高级的自定义版本，满足不同的应用场景。 选择合适的节流函数实现方式，能够有效提高程序性能，优化用户体验。 建议根据实际需求选择合适的实现方式。 高级自定义版本与流行的库（如 underscore）中的节流函数实现类似。
-
掌握这 8 个技巧，让你的 CSS 代码更简洁优雅 写出简洁优雅的 CSS 代码不仅能提高代码的可维护性，还能减少样式冲突。本文将介绍 8 个实用技巧，帮你提升 CSS 代码质量。 1. 善用 CSS 变量，提升代码复用性 图片 使用 CSS 变量的好处： 集中管理主题色值 一处修改，处处生效 支持运行时动态修改 提高代码可维护性 2. 使用 :is() 和 :where() 简化选择器 /* 之前的写法 */ .card h2, .card h3, .card h4, .card h5, .card h6 { margin-bottom: 16px; } /* 使用 :is() 简化后 */ .card :is(h2, h3, h4, h5, h6) { margin-bottom: 16px; } /* 使用 :where() 降低优先级 */ :where(.card, .panel, .box) p { line-height: 1.5; }这个技巧可以： 减少代码重复 提高代码可读性 灵活控制选择器优先级 3. 巧用 aspect-ratio 控制宽高比 /* 常见的 16:9 视频容器 */ .video-container { width: 100%; aspect-ratio: 16 / 9; background: #000; } /* 保持正方形的头像容器 */ .avatar { width: 100px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }这个属性特别适合： 响应式图片布局 视频容器 卡片网格布局 保持元素固定比例 4. 使用 clamp() 实现响应式数值 .title { /* 最小 16px，最大 32px，基于视窗宽度动态计算 */ font-size: clamp(16px, 4vw, 32px); } .container { /* 响应式内边距 */ padding: clamp(1rem, 3vw, 3rem); /* 响应式宽度 */ width: clamp(320px, 80vw, 1200px); }clamp() 的优势： 无需媒体查询 平滑过渡 代码更简洁 避免内容溢出 5. 使用 gap 属性简化布局间距 .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .flex-container { display: flex; flex-wrap: wrap; gap: 16px; /* 可以分别设置行列间距 */ /* gap: 16px 24px; */ }gap 属性的优点： 替代传统的 margin 更容易维护间距 支持 flex 和 grid 布局 避免临边距叠加问题 6. 使用逻辑属性适配不同书写方向 .container { /* 替代 margin-left/right */ margin-inline: auto; /* 替代 padding-top/bottom */ padding-block: 2rem; /* 替代 width */ inline-size: 100%; /* 替代 height */ block-size: auto; }逻辑属性的优势： 更好的国际化支持 适应不同书写模式 代码更具语义化 简化 RTL 适配 7. 使用 :has() 实现父元素选择 /* 当卡片包含图片时应用样式 */ .card:has(img) { padding: 0; } /* 当表单存在错误输入时改变样式 */ .form:has(:invalid) { border-color: red; } /* 调整空列表的样式 */ ul:not(:has(li)) { display: none; }:has() 选择器的应用场景： 基于子元素状态修改父元素 实现复杂的条件样式 减少 JavaScript 的使用 提高样式的动态性 8. 使用 @layer 管理样式优先级 @layer base, components, utilities; @layer base { h1 { font-size: 2rem; margin-bottom: 1rem; } } @layer components { .button { padding: 0.5rem 1rem; border-radius: 4px; } } @layer utilities { .text-center { text-align: center; } }@layer 的优势： 明确的样式优先级 更好的代码组织 避免优先级混乱 便于维护大型项目 欢迎大家留言补充。
-
CSS view()：JavaScript 滚动动画的终结者 每当我与 UI/UX 设计师开完会，他们要求我实现滚动动画时，我内心都忍不住想大声尖叫。为什么？因为我讨厌实现滚动动画。虽然它看起来很棒，实现起来也“相当简单”，但它有许多需要处理的怪癖，尤其是当涉及多个动态元素时。但当客户要求那些花哨的“滚动时淡入”效果时，你能怎么办？你只能卷起袖子写一些 JavaScript，即使这让你内心崩溃。 JavaScript 时代（黑暗时期） 以下是我曾经写过的代码（如果你还在这样做，我理解你的痛苦）： window.addEventListener('scroll', () => { const elements = document.querySelectorAll('.fade-in'); elements.forEach((element) => { const elementTop = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementTop < windowHeight * 0.8) { element.style.opacity = '1'; element.style.transform = 'translateY(0)'; } }); });我要么改变 CSS 属性，要么为具有动画属性的元素添加类，让它执行一些“魔法”。有趣的是，我还必须实现反向操作。这很丑陋，我讨厌它。可怜的浏览器每次滚动事件都要处理这些计算。有时我甚至能听到它的“哭泣”。在移动设备上，电池指示器会像自由落体一样下降。 在积累了一些 JavaScript 经验后，我使用防抖来减少需要运行的计算次数。当然，这稍微好了一些，但这不可能是最好的解决方案，对吧？ 发现 Intersection Observer（一线希望） 然后我发现了 Intersection Observer API。终于，有了更好的东西！我不再需要不断检查滚动位置，而是可以告诉浏览器：“嘿，当这个东西变得可见时告诉我”： const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); // 触发后不再观察！ } }); }, { threshold: 0.2 } ); document.querySelectorAll('.animate-on-scroll').forEach((el) => observer.observe(el));结合一些 CSS： .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-out; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }这确实好多了！但仍然……缺少了一些东西。动画要么开启，要么关闭——没有基于滚动位置的平滑控制。当客户要求那些超级平滑的视差效果或渐进式显示时，我又回到了编写复杂 JavaScript 或使用网上找到的 CSS 技巧的老路上。 然后一切都变了：view() 函数 然后，像 CSS 之神的礼物一样，我发现了 view()。天哪，看看这个： @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn linear; animation-timeline: view(); /* 关键所在 */ animation-range: entry 10% cover 30%; /* 细节控制 */ }就这样！没有 JavaScript，没有事件监听器，没有性能噩梦。只有如丝般顺滑的滚动响应动画。 最棒的部分？ 你知道最神奇的是什么吗？性能。那些旧的 JavaScript 滚动处理程序会让我的 MacBook 风扇像要起飞一样疯狂旋转。但 view()？即使在移动设备上，也如丝般顺滑。浏览器处理所有繁重的工作，所有操作都在合成器线程上运行（这是一个花哨的说法，意思是“非常快”）。 根据我们的性能测试： 动画类型CPU 使用率平均 FPS内存占用JavaScript38%4512MBIntersectionObserver22%558MBCSS view()5%601MB而且，它只是……有效。不再需要调试为什么动画在错误的时间触发，或者为什么滚动位置计算偏差了几个像素。当有很多动画元素时，不再有“滚动卡顿”。它只是有效。 深入理解 CSS view() 函数 CSS view() 函数的引入标志着我们处理滚动驱动动画方式的重大转变。让我们深入了解这个强大的功能，并理解为什么它正在彻底改变网页动画。 animation-timeline: view() view() 的核心是基于元素在视口中的可见性创建一个进度时间轴。你可以将其视为一个虚拟时间轴，随着元素进入视口而向前移动，随着元素退出视口而向后移动。 .element { animation-timeline: view(); }你可以自定义视口的测量方式： /* 为视口检测添加边距 */ animation-timeline: view(block 10px); /* 垂直边距 */ animation-timeline: view(inline 50%); /* 水平边距 */ animation-timeline: view(10px 20px 30px 40px); /* 所有边距 */理解 animation-range animation-range 属性定义了动画相对于元素在视口中的位置开始和结束的时间。就像为动画设置检查点。 实际应用场景： 1. 渐进式图片加载 @keyframes progressive-load { 0% { filter: blur(20px); scale: 1.1; } 100% { filter: blur(0); scale: 1; } } .lazy-image { animation: progressive-load linear; animation-timeline: view(); animation-range: entry 10% cover 50%; }2. 分步式文字浮现 @keyframes staggered-text { 0% { opacity: 0; transform: translateX(-50px); } 20% { opacity: 1; transform: translateX(0); } 80% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(50px); } } .staggered-text { animation: staggered-text linear; animation-timeline: view(); animation-range: entry 0% exit 100%; }3. 动态进度条 @keyframes progress-bar { from { width: 0%; } to { width: 100%; } } .progress-bar { animation: progress-bar linear; animation-timeline: view(); animation-range: entry cross(10% 20%); }高级技巧 1. 多时间轴组合 .card { --rotate-axis: 30deg; animation: rotate linear, scale ease-in-out; animation-timeline: view(), scroll(root block); animation-range: entry 0% cover 50%, entry 10% cover 90%; }2. 嵌套动画控制 .parent-element { animation-timeline: view(); } .child-element { animation-delay: calc(parent-animation-progress * 0.2s); }3. 视差滚动系统 .parallax-layer { animation: translate linear; animation-timeline: view(); } .layer-1 { animation-range: entry 0% cover 100%; } .layer-2 { animation-range: entry 10% cover 90%; } .layer-3 { animation-range: entry 20% cover 80%; }浏览器支持与渐进增强 截至 2024 年 12 月，推荐使用以下兼容方案： @supports (animation-timeline: view()) { /* 现代浏览器样式 */ } @supports not (animation-timeline: view()) { /* 回退方案 */ .fallback { transition: all 0.5s ease; } /* 使用 IntersectionObserver 添加 .active 类 */ }推荐使用 @scroll-timeline polyfill 为旧浏览器提供基本支持。 未来展望 即将推出的 CSS 滚动驱动动画规范将带来更多激动人心的特性： scroll() 时间轴类型 时间轴范围自定义单位（svh, lvw） 动画相位控制（animation-phase） 时间轴事件监听（实验性提案） 这些新功能将使创建如下效果成为可能： 基于滚动速度的动画 分页滚动动画 嵌套滚动容器联动 总结 CSS view() 的出现不仅改变了我们实现滚动动画的方式，更重新定义了网页动画的可能性边界。从简单的淡入效果到复杂的视差系统，现在都可以用声明式的简洁语法实现。虽然浏览器支持仍在推进中，但现代前端开发者应该： 优先使用 CSS view() 实现基础动画 使用 JavaScript 作为高级交互的补充 始终考虑渐进增强策略 定期关注 Scroll-driven Animations 规范 的更新 下次设计师再提出复杂的滚动动画需求时，你可以微笑着打开 CSS 文件——那些需要复杂 JavaScript 才能实现的效果，现在可能只需要几行优雅的 CSS 代码。 图片 如果您觉得内容对您有帮助，欢迎在看、点赞、分享 ⬇️❤️⬇️
-
为你的网站添加 CSS 烟花绽放🎆特效 烟花动画的 CSS 实现：随机大小与位置的完美结合 图片 引言 在项目开发中，我们经常需要添加一些动画效果来提升用户体验。最近，我就接手了一个需要实现烟花动画的任务，要求烟花能够随机大小，并在不同位置出现。经过一番探索，我决定采用 CSS 来实现这一效果。 动画选择的艺术 选择合适的动画方式是关键。对于轻量、装饰性的动画，CSS 动画足以胜任；而对于复杂度较高的运营活动或创意小游戏，JS 动画或图形库如 Pixi.js 可能是更好的选择。同时，我们还需要考虑学习成本和工程化问题。例如，lottie-web 虽然功能强大，但文件大小可能不适合仅用于一个动画场景。综合考虑，我决定采用 CSS 来实现烟花动画。 单个烟花的诞生 我采用了序列帧的方式来实现单个烟花。首先，我要求设计师导出一组序列帧图片，然后将这些图片合成为一张图片。利用 CSS 的steps()功能符，我们可以轻松实现逐帧动画。 随机位置的奥秘 为了使烟花出现在不同位置，我添加了一个关键帧，并在不同百分比处设置了不同的transform属性。通过组合烟花动画和随机位置动画，实现了烟花在随机位置绽放的效果。 大小随机的魅力 在随机位置的基础上，我进一步添加了scale属性，使烟花的大小也能随机变化。这样，每个烟花都拥有了独特的形态。 多个烟花的盛宴 为了打造更加绚丽的视觉效果，我添加了多个烟花元素，并给每个元素设置了不同的位置和延时。这样，多个烟花就能在不同时间、不同位置随机绽放。 色彩斑斓的烟花 为了让烟花更加多彩，我利用了 CSS Mask 技术。通过将背景图作为遮罩背景，并设置不同的背景颜色，实现了烟花的颜色变化。进一步地，我定义了一个颜色变化的关键帧，使烟花在绽放过程中呈现出多种颜色。 IE 浏览器的降级处理 考虑到 IE 浏览器不支持 Mask 遮罩，我进行了降级处理。通过使用 IE 不支持的选择器:default，为 IE 浏览器提供了不同的样式，确保烟花动画在 IE 下也能正常显示。 动画与用户体验的平衡 适当的动画可以提升用户体验，但并非所有用户都喜欢动画。为了尊重用户的选择，我增加了媒体查询prefers-reduced-motion，以便在用户系统设置中关闭动画时，禁用不必要的动画。 完整代码 HTML 部分 隐藏内容，请前往内页查看详情 CSS 部分 隐藏内容，请前往内页查看详情 总结 通过本次实践，我深刻体会到了 CSS 动画的强大和灵活。选择合适的动画方式、利用 CSS 序列帧动画、组合多个动画、使用 Mask 改变颜色、区分 IE 和现代浏览器、跟随系统设置关闭动画——这些技巧共同构成了一个完美烟花动画的实现。 CSS 实现烟花动画并不复杂，但要做到完美却需要细心和技巧。希望我的分享能对你有所帮助，如果你觉得不错，欢迎点赞、收藏、转发！
-
我常用的十个 CSS 代码技巧 在 CSS 开发中，一些简单的一行代码往往可以让你的页面变得更加优雅高效。以下是 10 个我喜欢使用的 CSS 一行代码，它们不仅简洁，还能在实际项目中起到很大的作用。 1. 设置宽高比例（Aspect Ratio） 通过 aspect-ratio 属性，可以根据指定的宽度自动调整高度（反之亦然）。 .box { width: 90%; aspect-ratio: 16/9; }适合用在视频播放器或图片容器中，确保它们以正确的比例呈现。 2. 逻辑属性（Logical Properties） 使用 margin-block 和 margin-inline 替代传统的 margin-top、margin-right 等，更加简洁直观。 .box { margin-block: 5px 10px; /* 上边距 5px，下边距 10px */ margin-inline: 20px 30px; /* 左边距 20px，右边距 30px */ }对于 padding 也是一样的： .box { padding-block: 10px 20px; /* 上下内边距 */ padding-inline: 15px 25px; /* 左右内边距 */ }这些属性会自动适配文本方向（如从左到右或从右到左）。 3. 全局盒模型设置 避免因默认 box-sizing 属性引起的布局问题，通过以下一行代码可以让所有元素包含其内边距和边框： *, *::before, *::after { box-sizing: border-box; }这可以大幅减少布局错误，让开发更加省心。 4. 平滑滚动（Smooth Scroll） 为整页启用平滑滚动，提升用户体验： html { scroll-behavior: smooth; }在单页网站或锚点导航中尤为实用。 5. 垂直书写模式（Vertical Writing Mode） 让文字从右向左垂直排列，可用于特殊设计场景或支持垂直书写的语言： .vertical-text { writing-mode: vertical-rl; }6. 文本溢出省略号（Truncating Text with Ellipsis） 对于超出容器的长文本，可以用省略号代替多余部分： .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }适合用在标题、卡片或链接预览中。 7. 居中对齐（Place-items） 使用 place-items 快速实现网格容器的水平和垂直居中对齐： .box { display: grid; place-items: center; }8. 限制文本宽度（Limit Text Width） 通过限制每行文本的最大字符数，提升可读性： p { max-width: 100ch; }“ch” 单位表示一个字符的宽度，非常适合用于段落样式。 9. 占位符样式（Styling Placeholder Text） 给输入框的占位符文本添加样式： ::placeholder { color: #999; font-style: italic; }10. 统一的强调色（Accent Color） 通过 accent-color 为交互元素（如按钮、复选框）设置统一的主题颜色： body { accent-color: green; }可以在整个网站中保持一致的视觉风格，而无需单独为每个元素定义样式。 总结 这些 CSS 一行代码涵盖了布局优化、用户体验提升和样式统一等多个方面，既实用又高效。将它们融入你的日常工作流，可以让项目的开发更加轻松，同时大幅提升代码的质量和可维护性。 试试这些技巧，感受它们带来的改变吧！
-
JavaScript逆向时，常用的11个hook 在逆向分析JavaScript代码时，开发者经常使用一些用于hook（钩子）的技术来监视或修改程序的行为。以下是一些常用的hook技术及其示例代码。 01、dom操作 在JS逆向油猴脚本中，DOM操作是最常用的一种Hook方式。通过修改DOM元素的属性和样式，我们可以实现对网页的控制和修改。 // 修改DOM元素的属性 document.getElementById('elementId').setAttribute('attrName', 'attrValue'); // 修改DOM元素的样式 document.getElementById('elementId').style.property = 'value';02、Cookie操作 Cookie Hook 用于定位 Cookie 中关键参数生成位置，以下代码演示了当 Cookie 中匹配到了 \_\_dfp 关键字， 则插入断点： (function () { 'use strict'; var cookieTemp = ''; Object.defineProperty(document, 'cookie', { set: function (val) { if (val.indexOf('__dfp') != -1) { debugger; } console.log('Hook捕获到cookie设置->', val); cookieTemp = val; return val; }, get: function () { return cookieTemp; }, }); })(); (function () { 'use strict'; var org = document.cookie.__lookupSetter__('cookie'); document.__defineSetter__('cookie', function (cookie) { if (cookie.indexOf('__dfp') != -1) { debugger; } org = cookie; }); document.__defineGetter__('cookie', function () { return org; }); })();03、事件监听操作 事件监听也是JS逆向油猴脚本中常用的一种Hook方式。通过监听网页上的事件，我们可以触发自定义的操作和行为。 // 监听按钮点击事件 document.getElementById('buttonId').addEventListener('click', function() { // 自定义操作和行为 });04、AJAX拦截操作 AJAX拦截也是JS逆向油猴脚本中常用的一种Hook方式。通过拦截网页上的AJAX请求，我们可以实现对数据的控制和修改。 // 拦截AJAX请求 XMLHttpRequest.prototype._send = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function() { // 自定义操作和行为 this._send.apply(this, arguments); };05、函数替换操作 函数替换也是JS逆向油猴脚本中常用的一种Hook方式。通过替换网页上的函数，我们可以实现对函数的控制和修改。 // 替换原有函数 var originalFunction = window.functionName; window.functionName = function() { // 自定义操作和行为 originalFunction.apply(this, arguments); };06、Header操作 Header Hook 用于定位 Header 中关键参数生成位置，以下代码演示了当 Header 中包含 Authorization 关键字时，则插入断点： (function () { var org = window.XMLHttpRequest.prototype.setRequestHeader; window.XMLHttpRequest.prototype.setRequestHeader = function (key, value) { if (key == 'Authorization') { debugger; } return org.apply(this, arguments); }; })()07、URL操作 URL Hook 用于定位请求 URL 中关键参数生成位置，以下代码演示了当请求的 URL 里包含 login 关键字时，则插入断点： (function () { var open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function (method, url, async) { if (url.indexOf("login") != 1) { debugger; } return open.apply(this, arguments); }; })();08、JSON.stringify操作 JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串，在某些站点的加密过程中可能会遇到，以下代码演示了遇到 JSON.stringify() 时，则插入断点： (function() { var stringify = JSON.stringify; JSON.stringify = function(params) { console.log("Hook JSON.stringify ——> ", params); debugger; return stringify(params); } })();09、JSON.parse操作 JSON.parse() 方法用于将一个 JSON 字符串转换为对象，在某些站点的加密过程中可能会遇到，以下代码演示了遇到 JSON.parse() 时，则插入断点： (function() { var parse = JSON.parse; JSON.parse = function(params) { console.log("Hook JSON.parse ——> ", params); debugger; return parse(params); } })();10、eval操作 JavaScript eval() 函数的作用是计算 JavaScript 字符串，并把它作为 脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是 Javascript 语句，eval() 将执行 Javascript 语句，经常被用来动态执行 JS。以下代码执行后，之后所有的 eval() 操作都会在控制台打印输出将要执行的 JS 源码： (function() { // 保存原始方法 window.__cr_eval = window.eval; // 重写 eval var myeval = function(src) { console.log(src); console.log("=============== eval end ==============="); debugger; return window.__cr_eval(src); } // 屏蔽 JS 中对原生函数 native 属性的检测 var _myeval = myeval.bind(null); _myeval.toString = window.__cr_eval.toString; Object.defineProperty(window, 'eval', { value: _myeval }); })();11、Function操作 以下代码执行后，所有的函数操作都会在控制台打印输出将要执行的 JS 源码： (function() { // 保存原始方法 window.__cr_fun = window.Function; // 重写 function var myfun = function() { var args = Array.prototype.slice.call(arguments, 0, -1).join(","), src = arguments[arguments.length - 1]; console.log(src); console.log("=============== Function end ==============="); debugger; return window.__cr_fun.apply(this, arguments); } // 屏蔽js中对原生函数native属性的检测 myfun.toString = function() { return window.__cr_fun + "" } Object.defineProperty(window, 'Function', { value: myfun }); })();本文到此结束，感谢您的阅读，祝编程愉快！
-
绝了！图片可以直接转成代码！开发是越来越简单了～～～ 平时我们浏览网站的时候，经常会遇到令人眼前一亮的网页设计，如果能够将这些设计元素或者整个页面的布局应用到自己的项目中，那该多好？ 今天就就给大家介绍一个能够将截图转为代码的开源项目 screenshot-to-code。 screenshot-to-code 项目通过结合先进的 AI 技术，为开发者和设计师提供了一个从视觉设计到代码实现的高效工具，极大地简化了开发流程。 screenshot-to-code 可以把界面设计截图直接转化为 HTML、CSS 或 JavaScript 代码，这样能帮助开发者快速生成网页前端代码。无论是一个按钮、一个导航栏，还是整个页面布局都能从截图转换成实际的前端代码。 图片 screenshot-to-code支持将截图转换成 HTML、Tailwind CSS、React 和 Vue 等现代技术栈的代码 。 用户还可以输入 URL 来克隆实时网站 。 图片 现在支持 Claude Sonnet 3.5 和 GPT-4o！ {iframe src="https://www.lequxiang.com.cn/view.php/5bdd13d974c3bcdf09c0f55de4c58840.mp4" height="40vh"/} {iframe src="https://www.lequxiang.com.cn/view.php/d5ec12c1432e8e9fef6d375a2f452b99.mp4" height="40vh"/} 开源地址：隐藏内容，请前往内页查看详情 官方网站：隐藏内容，请前往内页查看详情 支持的技术栈： HTML + Tailwind HTML + CSS React + Tailwind Vue + Tailwind Bootstrap Ionic + Tailwind SVG 支持的人工智能模型： Claude Sonnet 3.5 GPT-4o DALL-E 3 或 Flux Schnell（使用 Replicate）用于图像生成 此外，该项目还可以将网站的视频/录屏转换成网页，演示如下： {iframe src="https://www.lequxiang.com.cn/view.php/603a2aed15a31b1962e64eee146f299e.mp4" height="50vh"/} 安装使用 该项目使用 React/Vite 作为前端， FastAPI 作为后端。 需要 GPT-4 的 OpenAI API 密钥或 Anthropic 密钥（可选）， 推荐两者都使用，以便你可以比较 Claude 和 GPT4o 的结果。 运行后端（使用 Poetry 进行包管理 - 如果你没有它，请安装 pip install poetry）： cd backend echo "OPENAI_API_KEY=sk-your-key" > .env echo "ANTHROPIC_API_KEY=your-key" > .env poetry install poetry shell poetry run uvicorn main:app --reload --port 7001OpenAI API 密钥也可以通过前端的对话框设置密钥（加载前端后点击齿轮图标）。 图片 运行前端： cd frontend yarn yarn dev然后打开 http\://localhost:5173 就可以开始使用了。 图片 如果要使用其他端口，请更新 frontend/.env.local 中的 VITE\_WS\_BACKEND\_URL 配置选项。 如果你不想浪费 GPT4-Vision，你可以在模拟模式下运行后端： MOCK=true poetry run uvicorn main:app --reload --port 7001Docker 上安装 如果你已经安装了 Docker，可以使用 docker-compose 命令启动该项目： echo "OPENAI_API_KEY=sk-your-key" > .env docker-compose up -d --build接下来就可以在浏览器中打开 http://localhost:5173 使用了。 图片
