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

🍀一、渐变神器Gradient 🍀二、两款阴影工具在线网站 🍀三、网站UI配色宝藏网站UI Design Daily 🍀四、 Small Dev tools实用工具合集 🍀五、 Glass Morph

GSPA是制作网页动画的工具（很全），你可以使用GSAP对几乎所有JavaScript能接触到的东西进行动画处理，可以在任何框架中使用。ScrollTrigger是其中一个插件，用于滚动触发动画。

进入状态 logo 上移滚动状态 开始展开状态 绝大部分内容展开状态 全部展开状态 动画需求综合分析 核心：页面滚动触发动画 页面滚动 钉钉 logo + description 发生 位置/大小/透

Stylelint作为Css代码检查工具，可规避一些Css错误，并保持统一的编码风格。 感觉相对来说大家都更熟悉`ESLint`吧，`Stylelint`和`ESLint`在功能和使用上较为相似的

样式冲突示例 UnoCSS 用了 Tailwind CSS 样式之后，与 Element-Plus 的 Button 样式有冲突，导致背景色以及字体显示不出来。下图为具体效果： 解决方法如下

前言 原子化CSS(Atomic CSS）是近年来提出的一种CSS书写方式，与之有区别的是我们比较常用的组件化书写方式。今天介绍的是AntFu的开源新作原子化CSS引擎—UnoCSS。

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战 unocss 简单介绍 原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行

如果您使用 CSS 有一段时间，那么您就会知道继承、特异性和命名是一些最难处理的事情。由于所有 CSS 都是全局的，随着代码库的增长，防止样式相互冲突并导致意外副作用变得越来越困难!