CSS 锚点定位终于来了！
盼了好久，最近 终于迎来了 锚点定位的正式支持。这是一个和 滚动驱动动画一样，足以颠覆整个 开发领域的新特性。有了这个特性，很多以前强依赖 的方式，都可以纯 解决，并且实现起来更加简单、更加灵活，一起看看吧 一、快速了解 CSS 锚点定位 在过去，要实现一个元素定位，通常需要一个相对定位。比如这样一个 tooltip 如果不借助 ，让这个气泡位于按钮的正上方，就只能约束 结构，让这个气泡位于按钮内部 并且设置按钮为相对定位，才能通过绝对...
实现一只碎片化效果的鸟
老板：别人有的，我们也要有！ 效果如下，每一只动物都是一块一块碎片组成的，并且每一次切换的时候，碎片都有一种 重组动画效果 ，如下： 实现起来不难，分享给大家 一探究竟 进到这个网站中看，可以看到每一只动物都是由无数个碎片DOM节点叠加而成的，而这些碎片是怎么画的呢，可以看出用了两个样式： clip path ：碎片形状的绘制 background color ：碎片背景颜色 如果对 这个样式感兴趣的，可以去 MDN 文档上看 碎片数据...
H5 实现 ChatGPT 语音对话效果
起因 前段时间在群里看到群友想要复刻 的语音对话效果，手痒之下自己也来复刻一波！ 难点解析 这个效果平心而论是比较复杂的，我一般会把这种比较复杂的效果简单拆解出来，然后一步一步来解决。 1. 不规则圆形，可以看到最开始时是由一个圆形过渡到不规则的圆形同时有一个滚动的效果。 2. 溶解粘滞效果，从不规则的圆形过渡到音柱时可以看到有一个粘滞溶解的效果。 3. 音柱的抖动效果，我们需要模拟收音时的不规则抖动效果来更贴近真实场景。 4. 融合拓...
poistion: sticky 失效的所有原因
在 Web 开发和设计的世界里，CSS 在创建视觉吸引力和互动性强的网站或应用方面起着至关重要的作用。当涉及到在 Web 页面上定位元素时，Web 开发者通常要让某些元素在滚动时固定在特定的位置。传统上， 属性被用于这个目的。然而，还有一个更好的替代方案，它提供了更多的灵活性和更好的用户体验 —— 。 可以说，CSS 的 是 Web 开发者梦寐以求的功能。它允许元素根据滚动位置在相对定位（ ）和固定定位（ ）之间切换，而不需要任何 Ja...
神奇的进度条！水缸进度动画效果怎么实现的？
最近看到一个非常有趣的动画效果： 水波进度动画 ，想了一下实现思路，分享给大家 效果如下 基本组件代码 先把最基础的组件代码样式写出来，其实无非就是四个部分： 1、圆形水缸 2、水波 2、百分比数字 3、进度条 我们先把 画出来， 待会再画 可以看到初步效果已经出来了 水波效果 最重点的就是 ，其实这个 就是个障眼法罢了，我画张图你们就懂了，其实就是一个 ，一直在 ，让用户有一种水波的视觉感 所以我们可以画一个圆角正方形，并且让他一直旋...
不用 JS，轻松锁定页面滚动！
那么，该如何锁定页面的滚动呢？ 一、传统的实现方式 传统的方式其实也不复杂，就是在打开弹窗时阻止滚动就行了，通常是改变 属性 \ 如果是在现代框架里，比如 ，可以用监听弹窗状态来实现 这样就能锁定滚动了 二、传统方式的局限 虽然上面的实现看似完美，其实还有潜在问题的。比如有多个弹窗，弹窗覆盖的情况下，这个时候锁定就会出问题了。 因为在关闭第二个弹窗的时候，页面已经解除锁定了，所以在第一个弹窗还在的时候，页面已经可以滚动了 如果想要优化这...
设计问能不能实现这种碎片化的效果
前言 某天设计发来一个 ，问我能不能实现这种类似的效果。 不知你们什么感想，反正我当时第一次看到这个网站的效果时，心里第一反应就是这做个锤子啊。 F12 调试 让我们打开调试，瞅瞅别人是如何实现。 可以看到在该层级下，页面有很多个 元素，而每一个元素都是定位覆盖其父元素的。 当我们添加 后，可以看到嘴角这里少了一块。 而继续展开其内部的元素就可以看到主要的实现原理了： 。 和 更详细的解释可以看 ，简单来说就是在一个 里面绘制一个多边形...
全尺寸的带圆角的渐变边框
本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ 在之前，我们有一篇介绍带圆角的渐变边框的纯 CSS 实现的文章： 会有这么一个话题的本质在于，在过往，想使用纯 CSS 实现纯粹的，内部透明渐变边框，是一件非常困难的事情，像是这样： 这个效果的几个核心难点： 1. 边框带渐变色 2. 边框支持设置 3. 内部支持透明 思考一下，使用 CSS，我们可以如何实现这个效果？ 过往比较好的方法 之前有一...
极具创意的鼠标交互动画
最近，群里在讨论这么一个有趣的交互效果，来源于： ： 通过审查元素，发现原效果借助了 Canvas 实现。 思索了一番，觉得这个效果利用 CSS 配合部分 Javascript 代码完全也是可以做到的。 于是动手尝试了一番，最终完美的复刻了该效果： 过程中还是有非常多有意思的技巧存在的，因此，本文将带大家一起，从 0 到 1 实现这个有趣的交互效果。 利用混合模式实现叠加效果 整个效果，比较核心的一块便是当鼠标 Hover 上去时，整个...