马上都 2020 年了，你还没有使用网格布局吗？虽然这些年 js 发展的势头正劲，盖过了 css 的发展风头，但其实 css 也是有很大进步的。弹性布局、网格布局相继被各大主流浏览器支持，大大方便了我们切图仔，再也不需要用 bootstrap 的栅格系统了，网格布局原生支持！S…

1. 需求背景 设计出了一版关于多行文本展示的ui，如下图。默认展示n行文字，超出部分隐藏且文字以...结尾展示，“展开”按钮环绕在文字右下角。点击展开按钮后文字变为收起。 2. 学习 其实在我们感知

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件，官方解释。 传统的css文件缺失变量等概念，导致需要书写的重复的代码很多。我写JS的习惯是遇见重…

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。 其实，这里是运用了 CSS 中的 MASK 属性实现的。 之前在多篇文章都提到了 mask，比较详细的一…

horizontal-tb：默认值，表示水平排版，从上到下。 vertical-lr：表示垂直排版，从左到右。 vertical-rl：表示垂直排版，从右到左。 至此，我们数字滚动效果已经初步实现了，在下一节中我们将会逐步完善此效果，以满足业务需求。

实现前端数字滚动效果效果如下：代码如下：