简单轻便的四个CSS动画库
加载库 访问地址： 纯 CSS 实现 所有加载动画都只依赖 CSS（主要是 、 、 、 等），不需要 JS 或图片资源，拷贝即可使用。 多种 Zig Zag 样式 包含多款「之字形（zig zag）」运动效果的加载动画，比如波浪形、交错条形、点状跳动等，适合放在数据加载、内容占位或表单提交等场景。 可直接复制代码 每个示例都提供 HTML + CSS 片段，开发者只要复制到项目里即可快速使用，也可以根据需要自定义颜色、大小、动画速度等。...
为什么你写的position: sticky不工作
前端世界里有很多看似“直白”的属性，比如 ，听起来像是“粘住某个位置”——只要设置好就能吸附在页面某个位置上，滚动时一动不动。 结果实际开发中你可能经历过以下崩溃三连： 设置了 ，元素依然随页面滚动； 控制台一切正常，CSS 正确无误，就是不生效； 你开始怀疑人生，默默换回了 。 别慌，这篇文章带你 一次性弄懂 的底层机制、误区、实际用法和最佳实践 。看完之后，不再当“被黏住的程序员”。 一、先明确：什么是 sticky？ 是一种 混合...
匀速旋转动画的终极对决requestAnimationFrame vs CSS Animation
引言：旋转动画的隐藏陷阱 在现代Web开发中，实现一个流畅的无限旋转动画似乎是个简单任务。但当我深入探究时，发现这个看似基础的需求背后隐藏着 性能陷阱 、 数学精度问题 和 浏览器渲染机制的深层奥秘 。本文将带你从一段常见的requestAnimationFrame实现出发，深度剖析两种技术方案的优劣，并揭示浏览器动画渲染的底层原理。 一、原始方案解剖：requestAnimationFrame的功与过 1.1 值得称赞的设计 这段代码...
css中BEM命名
引言 在现代前端开发中，CSS的规模和复杂度不断增长，如何有效地组织和命名CSS类成为了一个重要课题。BEM（Block, Element, Modifier）命名规范因其清晰的结构和可扩展性在前端社区广受欢迎。本文将通过分析WEUI（微信官方UI库）的按钮UI设计代码，深入探讨BEM规范的核心概念和实际应用。 什么是BEM？ BEM是一种CSS命名方法论，由Yandex团队提出，旨在解决大型项目中的CSS组织和命名问题。BEM代表：...
CSS 实现文本省略显示【单行，2行，多行】
在 中，长文本内容可能会超出其容器的范围。为了保持良好的用户体验，我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行，超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略，主要使用以下CSS属性： : 禁止文本换行。 :...
css中，有哪些方式可以隐藏页面元素？区别?
一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单，设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应，想必都会想到 rem 、 vw 等相对单位，我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px \ 160px； 屏幕宽度小于120...
Flexbox 弹性布局
一、是什么 简称 box，意为”弹性布局”，是一种一维的布局模型。一次只能处理一个维度上的元素布局，一行或者一列。 采用Flex布局的元素，称为 容器（ ），简称”容器“；它的所有子元素自动成为容器成员，称为 项目（ ），简称”项目“。 容器中默认存在两条轴， 主轴 和 交叉轴 。项目默认沿主轴排列，通过 来决定主轴的方向。 每根轴都有起始线和终止线，用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...
提升CSS渲染性能
1\. 提升CSS渲染性能: 2\. 合适使用css选择器: 3\. 提升css文件加载的性能: 4\. 精简css代码: 5\. 合理使用web fonts: 6\. css动画优化: