在前端开发的日常中，我们常常围绕着常见的 CSS 属性打转，却忽略了那些藏在规范角落里的小众特性。它们看似不起眼，却能在关键时刻简化代码、提升交互质感，成为提升开发效率的秘密武器。今天，就为大家盘点

今 天 来 实 现 一 个 可 翻 页 的 笔 记 本 📖 📚 ~ ~

还在为高度过渡效果苦恼吗？快来瞧瞧吧，今天叫你两种新方式，保证你从此一劳永逸，再也不用伤脑筋啦~~~

想要实现一个可以展开收起的效果并不难，直接用`display: none;`就能完成，但这种方法并不能实现过渡动画效果，想要实现过渡效果必须是属性值的变化，比如`height`从0到自身最大高度，除了

wc!!!你不会还在用flex布局吧，都2024年了快进来看看css3最强布局Grid布局 绝对让你眼前一亮

背景 在上一篇文章 一个炫酷的css动画里面，我们实现了一个酷炫的css动画。 那个最终实现上面，用了很多的标签在里面，有一些是效果需要，但是有一些是可以精简的。 于是想减少一下标签的使用来实现类似的

最近我需要做一个下拉刷新的功能，实现功能后我发现，它需要处理的情况还蛮多，于是我整理了这篇文章。首先我会讲解下拉的原理、根据原理写出初始代码；然后我会一边介绍代码存在的缺陷、一边解决缺陷并做些许优化。

不知大家是否接触过元素高度的过渡，之前呢我是使用 CSS 加 JS 的方式来解决的，就是通过 JS 计算一下要过渡的元素的高度，然后自己给它加上 height 为某一数值。

本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果： 上面的动画效果，非常有意思，核心有两点： 小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果 小球在碰撞边界