CSS新特性contain，控制頁面的重繪與重排
- 2021 年 5 月 6 日
- 筆記
在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个 提高 CSS 动画性能的正确姿势 。 OK，下面进入本文正题， contain 为何？ contain 属性允许我们指定特定的 DOM 元素和它的子元素，让它 …
Continue Reading探秘神奇的運動路徑動畫 Motion Path
- 2021 年 4 月 28 日
- 筆記
CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1 ，翻译过来也就是运动路径。本文将对 motion path 一探究竟，通过本文，你可以了解到： 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 …
Continue ReadingCSS 還能這樣玩？奇思妙想漸變的藝術
- 2021 年 4 月 26 日
- 筆記
在之前的这篇文章 -- 一行 CSS 代码的魅力 中，我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙（也许奇怪更合适）的背景。 本文，将继续介绍背景的一些有意思的知识，利用一些极小的单位，只需要短短几行代码，就能够产生出美妙而又有意思的背景效果~ 数量级对背景图形的影响 本文的主角主要是： …
Continue Reading新時代布局中一些有意思的特性
- 2021 年 4 月 20 日
- 筆記
在最新的 Chrome Canary 中，一个有意思的 CSS 语法 Container Queries 得到了支持。 Chrome Canary ：开发者专用的每日构建版，站上网络科技最前沿。当然，不一定稳定~ 而在最近几个 Chrome 版本中，有一些挺有意思的属性相继得到支持，本文就将介绍一下 …
Continue ReadingCSS @property，讓不可能變可能
- 2021 年 4 月 15 日
- 筆記
本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 MDN -- CSS Property ，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性， …
Continue Reading【面試技巧】老生常談之 n 種使用 CSS 實現三角形的技巧
- 2021 年 4 月 12 日
- 筆記
在一些面经中，经常能看到有关 CSS 的题目都会有一道 如何使用 CSS 绘制三角形 ，而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS …
Continue ReadingCSS 文字裝飾 text-decoration & text-emphasis
- 2021 年 4 月 6 日
- 筆記
在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis ，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration …
Continue Reading巧用 SVG 濾鏡還能製作表情包？
- 2021 年 3 月 31 日
- 筆記
本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇： 有意思！强大的 SVG 滤镜 有意思！不规则边框的生成方案 背景 今天在群里面聊天，看到有人发这个表情包： 刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 feTurbulence 滤 …
Continue Reading有意思！不規則邊框的生成方案
- 2021 年 3 月 29 日
- 筆記
本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。 本文完整的 DEMO，你可以戳这里： transparent 配合 SVG feMorphology 滤镜生成不规则边框 需求背景，给不规则图形添加边框 在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些： 使用纯 …
Continue Reading小技巧！CSS 整塊文本溢出省略特性探究
- 2021 年 3 月 12 日
- 筆記
今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道，到今天（2020/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 对于 单行文本 ，使用单行省略： { width: 200px; white-space: nowrap; overf …
Continue Reading