iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
最近，在看 LPL 比赛的时候，看到这样一个有意思的六芒星能力图动画：  今天，我们就来使用纯 CSS 实现这样一个动画效果！ ## 实现背景网格 对于如下这样一个背景网格，**最好的方式当然肯定是切图**。  如果一定要使用 CSS，勉强也能做，这就涉及了**不规则图形边框**效果，我们有一些方式可以实现，可以参考一下这几篇文章： + [现代 CSS 高阶技巧，不规则边框解决方案](https://github.com/chokcoco/iCSS/issues/221) + [有意思！不规则边框的生成方案](https://github.com/chokcoco/iCSS/issues/106) 这里，我们可以使用 `drop-shadow()`，大致实现一下这个效果，核心步骤： 1. 通过叠加实现一个六边形图形 2. 利用 `drop-shadow()` 实现边框效果 用动图演示一下，大概是这样：  代码如下：...
## 3、层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？ `z-index` 看上去其实很简单，根据 `z-index` 的高低决定层叠的优先级，实则深入进去，会发现内有乾坤。 看看下面这题，定义两个 `div` A 和 B，被包括在同一个父 `div` 标签下。HTML结构如下： ``` #divA display:inline-block #divB float:left ``` 它们的 `CSS` 定义如下： ``` CSS .container{ position:relative; background:#ddd; }...
最近，群里面的同学发了这么一个非常有意思是动画效果：  原效果地址 -- [CodePen Demo -- Letter Hop](https://codepen.io/ste-vg/pen/GRwmqxq) 当然，原效果，主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库： ```Javascript import { Those3DTexts } from "https://cdn.skypack.dev/that-3d-text-library"; import { gsap } from "https://cdn.skypack.dev/gsap"; import...
本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。 本文完整的 DEMO，你可以戳这里：[transparent 配合 SVG feMorphology 滤镜生成不规则边框 ](https://codepen.io/Chokcoco/pen/ExZPpQq) 系列另外两篇： + [有意思！强大的 SVG 滤镜](https://github.com/chokcoco/cnblogsArticle/issues/27) + [震惊！巧用 SVG 滤镜还能制作表情包？](https://github.com/chokcoco/iCSS/issues/107) ## 需求背景，给不规则图形添加边框 在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些：  使用纯 CSS，搭配一些技巧，是可以制作出上面的图形的，当然这只是需求的第一步。 紧接着，可能会有要给上述图形添加边框的诉求，这个时候，CSS 就很难办到了。 ## 尝试使用 `drop-shadow`...
本文，将向大家介绍 CSS 规范中，最新的 Anchor Positioning，翻译为**锚点定位**。 Anchor Position 的出现，极大的丰富了 CSS 的能力，虽然语法稍显复杂，但是有了它，能够实现非常多之前实现起来非常困难，或者压根无法使用纯 CSS 实现的功能。 Anchor Position 当前仍属于实验室功能，新版本 Chrome 开启该功能： 1. 浏览器 URL 输入框输入： chrome://flags/ 2. 找到 Experimental Web Platform features 选项，开启该功能 ##...
今天，有个群友在群里提问，使用 CSS 能否实现下述这个图形： emmm，中间这个酷似三次贝塞尔曲线的造型，使用 CSS 不太好实现。我的建议是**切图实现**，然而群友要求一定要用 CSS 实现。 虽然麻烦，但是这个图形勉强也是能用 CSS 实现的。本文就将探讨一下上述图形的纯 CSS 实现方式，并且从中进行一定的扩展延伸。 ## 尝试实现 这个图形其实与我们的 Chrome Tab 按钮非常类似，像是这样： 不一样之处在于，Chrome 的侧边其实是垂直的竖线，而上述的需求，侧边是一条斜线。 首先，我们快速看看这个 Chrome Tab 的交互应该如何实现： 我们对这个按钮形状拆解一下，这里其实是 3 块的叠加：  只需要想清楚如何实现两侧的弧形三角即可。这里还是借助了渐变...
在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样： ```HTML ``` ```CSS div { width: 300px; height: 300px; background: url(image.jpg); transition: .4s; } .img:hover { opacity: 0; } ```  但是，CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。 想想看，下面这样一个效果，是 CSS 能够实现的么？ ...
最近，群友贴了一个非常有意思的动画效果，整体动画效果如下：  点击某个按钮后，触发一个动画效果，原本的网格内容，将按顺序（又带点随机的效果）从高处下落进行加载填充动画。 当然，我个人认为这个动画有点华而不实，主要体现在这个动画一次需要耗费较长时间，有点消磨人的耐心。不过确实一个很好的 CSS 动画教学案例。 而本文，就将具体去剖析这个动画，如果使用纯 CSS，应该如何实现。 ## 还原布局结构 首先，我们需要大致还原布局结构，这个并非整个动画的核心。 整个动画的核心在于**元素按顺序（又带点随机的效果）从高处下落渐次进行下落加载填充动画**。 当然，还原这个布局也非常简单，这里我们借助 flex 布局快速实现，几个关键点： 1. 每个 flex-item 宽度不固定：这一点可以使用 SASS 函数进行模拟，随机生成不同宽度的 flex-item 2. 每个 flex-item 背景色随机：这一点同样也可以借助 SASS 函数 实现 3....
在 Chrome 104 中，支持了一个非常有意思的新特性。CSS 中的 `transform` 除了原本的整体写法法，新增了一种分开的写法。不要小看这一点，此点改动在很多时候，能够非常有效的解放生产力，算是一个非常 NICE 的更新。 下面我们就来浅析一下。 ## 什么是分开写的 `transform`？ 什么意思呢？我们来看这样一个例子： 在之前，我们可以利用 `transform` 配合绝对定位的 `top`、`left` 进行任意元素的水平垂直居中，像是这样： ```HTML ``` ```CSS div { width: 200px; height: 200px; background: #000;...
本文接前文：[不可思议的混合模式 mix-blend-mode](https://github.com/chokcoco/iCSS/issues/16) 。由于 `mix-blend-mode` 这个属性的强大，很多应用场景和动效的制作不断完善和被发掘出来，遂另起一文继续介绍一些使用 `mix-blend-mode` 制作的酷炫动画。 CSS3 新增了一个很有意思的属性 -- `mix-blend-mode` ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为**混合模式**。 混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。 ## mix-blend-mode 简介 关于 `mix-blend-mode` 最基本的用法和描述，可以简单看看上篇文章 [不可思议的混合模式...