众所周知，有些属性是不支持过渡动画的，比如高度auto 效果如下 要实现过渡效果，之前提供过一个grid布局方式，原理是利用grid的尺寸单位1fr支持过渡的特性，有兴趣可以回顾这篇文章： 不过到了现

需求 我们今天来实现一下,点击当前用户的div, 自动滚动到用户在排行榜中的位置. 效果 大家可以先看一下下面的GIF, 所实现的效果. 实现 1. 准备DOM 结构 首先,我们在进行列表建设的时候,

不知道你们是否留意到，CSS 的世界最近很火热。🔥 在幕后，所有主流浏览器厂商和 CSS 规范的作者们一直共同努力，推出了很多高需求的 CSS 功能。比如容器查询，原生 CSS 嵌套，相对颜色...

原生Html实现扇形旋转切换效果（等级切换转盘）；实现动态扇形旋转切换效果，切换进度支持渐变效果展示；

CSS实现auto高度的过渡动画。由于通常不知道content中具体内容所占的高度，为高度的变化添加过渡动画时，会发现`transition`不起作用，这是因为`auto`并不是一个具体的高度数值。

通过拖动中隔线，可以动态地改变两边的对比区域的比例。常用于在网站中对比产品性能、产品设计，给用户直观的感受。

在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左

最近在需求里遇到了一个手指引导交互的动画需求。这篇文章就来讲讲如何CSS实现这个动画，如下图所示： 简单分析了一下效果，是一个手指移动到某处位置，然后会触发呼吸灯闪烁的效果，所有实现整个动画可以分两步

一、要点 1. 保持背景视频仅铺满第一屏并适配不同尺寸显示器。【🌟】 通过媒体查询适配宽高比例，控制width跟height的100vh/vw切换。 页面挂载完毕时执行视频自动静音播放（非静音无法静默