ChokCoco

摘要： 最近几年 CSS 界的大事之一是每年年底的 《State Of CSS》，也就是 CSS 现状调查，去年年底发布了《State Of CSS 2021》。其中关于特性这一章，会列出一些比较新的 CSS 特性在当年的使用情况概览： 每个图代表一个特性，上图是按照使用数量进行区分，外圈表示听说过，而内圈 阅读全文

摘要： 在我们的页面中，经常会出现这样的问题，一块区域内的文本或者边框，在展示的时候，变得特别的模糊，如下(数据经过脱敏处理)： 正常而言，应该是这样的： emmm，可能大图不是很明显，我们取一细节对比，就非常直观了： 何时触发这种现象？ 那么？什么时候会触发这种问题呢？在 Google 上，其实我们能搜到 阅读全文

摘要： 最近 S11 LPL 春季赛开赛，在看比赛的过程中，我发现新赛季的 Ban/Pick 选人阶段，出现了一种新的，有意思的遮罩效果，如下图所示： 当然，它是一个动态的效果，当选人的过程中，会有一种呼吸的效果： Gif 图有点糊，总的而言，就是一种接近迷雾的遮罩效果。并且，他是能够动态变化的。 本文将探 阅读全文

摘要： 最近，我们内部的一个低代码平台完工上线，它的首页大概是这样子（数据脱敏）： 当然，这个不是项目不是本文的重点。主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。 剥离掉页面的内容元素，只剩下背景的话，大概是这样： 一开始是打算切图实现的，但是仔细一想，这个效果使用 阅读全文

摘要： 有群友问我，使用 CSS 如何实现如下 Loading 效果： 这是一个非常有意思的问题。 我们知道，使用 CSS，我们可以非常轻松的实现这样一个动画效果： <div></div> div { width: 100px; height: 100px; border-radius: 50%; bord 阅读全文

摘要： 本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。 CSS 动画介绍及语法 首先，我们来简单介绍一下 CSS 动画。 最新版本的 CSS 动画由规范 -- CSS Animations Level 1 定义。 CS 阅读全文

摘要： 背景 某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局： 在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的： 一旦涉及到圆角或者波浪效果，难度就会提升很多。 实现这种连续平滑的曲线其实是比较麻烦的，当然，也不是完全没有办法。本文，就会带大家看看，使用 CSS 实现上述 阅读全文

摘要： 最近利用 CSS 实现了一些看似超出 CSS 能力的效果： 巧用渐变实现高级感拉满的背景光动画 Amazing！！CSS 也能实现极光？ 本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些烟雾效果。像是这样： 仔细观察烟雾效果，有两个比较重要的特点： 模糊效果 颗粒感 首先看模糊 阅读全文

摘要： 在上次写完这篇文章 -- 巧用渐变实现高级感拉满的背景光动画 之后，文章下面的评论有同学留言，使用 CSS 可以实现极光吗？ 像是这样： emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。 阅读全文

摘要： 背景 今天逛 CodePen，看到了这样一个非常有意思的效果： CodePen Demo -- Material Design Menu By Bennett Feely 这个效果还是有一些值得探讨学习的点，下面我们一起来看看。 如何实现这样一个类似的效果？ 首先，想一想，如果让你去实现上面的效果， 阅读全文