摘要:在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。 OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能 阅读全文
posted @ 2021-05-06 10:00 ChokCoco 阅读(324) 评论(1) 推荐(3) 编辑
摘要:CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径。本文将对 motion path 一探究竟,通过本文,你可以了解到: 什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 C 阅读全文
posted @ 2021-04-28 10:38 ChokCoco 阅读(1185) 评论(9) 推荐(19) 编辑
摘要:在之前的这篇文章 -- 一行 CSS 代码的魅力 中,我们介绍了一种使用一行 CSS 代码就能够生成的一种美妙(也许奇怪更合适)的背景。 本文,将继续介绍背景的一些有意思的知识,利用一些极小的单位,只需要短短几行代码,就能够产生出美妙而又有意思的背景效果~ 数量级对背景图形的影响 本文的主角主要是: 阅读全文
posted @ 2021-04-26 10:19 ChokCoco 阅读(2033) 评论(12) 推荐(21) 编辑
摘要:在最新的 Chrome Canary 中,一个有意思的 CSS 语法 Container Queries 得到了支持。 Chrome Canary:开发者专用的每日构建版,站上网络科技最前沿。当然,不一定稳定~ 而在最近几个 Chrome 版本中,有一些挺有意思的属性相继得到支持,本文就将介绍一下, 阅读全文
posted @ 2021-04-20 10:08 ChokCoco 阅读(407) 评论(1) 推荐(4) 编辑
摘要:本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大的增强的 CSS 的能力! 根据 MDN -- CSS Property,@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性,允 阅读全文
posted @ 2021-04-15 10:14 ChokCoco 阅读(1383) 评论(10) 推荐(13) 编辑
摘要:在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天,其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式,本文将具体罗列讲讲。 通过本文,你能了解到 6 种使用 CSS 绘 阅读全文
posted @ 2021-04-12 09:47 ChokCoco 阅读(1873) 评论(3) 推荐(23) 编辑
摘要:在 CSS 中,文字算是我们天天会打交道的一大类了,有了文字,则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis,在最后,还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration 阅读全文
posted @ 2021-04-06 10:35 ChokCoco 阅读(1688) 评论(10) 推荐(25) 编辑
摘要:本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!不规则边框的生成方案 背景 今天在群里面聊天,看到有人发这个表情包: 刚好最近一直在学习 SVG,脑海中就把这个表情包的效果和 feTurbulence 滤 阅读全文
posted @ 2021-03-31 10:08 ChokCoco 阅读(461) 评论(1) 推荐(8) 编辑
摘要:本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。 本文完整的 DEMO,你可以戳这里:transparent 配合 SVG feMorphology 滤镜生成不规则边框 需求背景,给不规则图形添加边框 在我们日常开发中,时长会遇到一些非矩形、非圆形的图案。类似下面这些: 使用纯 阅读全文
posted @ 2021-03-29 10:15 ChokCoco 阅读(498) 评论(0) 推荐(2) 编辑
摘要:想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter + CSS)。 什么是 阅读全文
posted @ 2021-03-25 14:57 ChokCoco 阅读(1278) 评论(0) 推荐(24) 编辑