iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
本文，我们将一起利用纯 CSS，实现如下这么个酷炫的效果：  在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 -- **@scroll-timeline**：[革命性创新，动画杀手锏 @scroll-timeline](https://github.com/chokcoco/iCSS/issues/166)。 利用这个新特性，我们可以轻松的将原本基于时间控制的动画效果，交给页面的滚动特性进行控制，像是这样：  只是，该特性由于诸多原因，遭到了规范废弃。 然而，时隔一年半，规范带着新的 [animation-timeline](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) 王者回归！我们可以将其简单理解为：**Scroll-driven Animations（滚动驱动动画）**。 ## 什么是滚动驱动动画（Scroll-driven Animations）？ OK，我们通过一个例子，快速上手（回忆）滚动驱动动画。 我们来实现这么一个滚动进度指示器效果：  注意看 GIF 图的上方，有一个黄色进度条，可以通过滚动，改变黄色进度条的进度状态。这个也就是我们说的滚动指示器效果。 在之前，这个效果利用纯 CSS 是不太好实现的，但是有了 animation-timeline 之后，一切都将变得非常轻松。...
今天在群里，有个小伙伴问了这么一道很有趣的问题： 1. CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容 为了简化实际效果，我们看这么一张示意效果图：  可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。 这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？ 答案当然是可以，XBoxYan 大佬在 [CSS 实现超过固定高度后出现展开折叠按钮](https://juejin.cn/post/7202030221793165368?searchId=2023111021201719515AB1EBF4A44F0984) 介绍了一种非常巧妙的**借助浮动的解法**，十分有意思，感兴趣的同学可以先行一步了解。 当然，浮动 `float` 在现如今的 CSS 世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。 ## 方法一：借助最新的容器查询 第一种方法，非常简单，但是对兼容性有所要求。那就是使用容器查询 -- `@container` 语法。 > 容器查询在 [新时代布局新特性...
在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如在[现代 CSS 解决方案：CSS 数学函数](https://github.com/chokcoco/iCSS/issues/177)一文中，我们详细介绍了 + calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。 + min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。 + clamp()：用于将属性值限制在一个范围内，支持三个参数：最小值、推荐值和最大值。 在 [现代 CSS 解决方案：CSS 原生支持的三角函数](https://github.com/chokcoco/iCSS/issues/233) 一文中，给大家介绍了从 Chrome 111 开始也逐渐开始原生支持的三角函数： + sin() + cos() +...
本文，我们将一起学习，使用纯 CSS，实现如下所示的动画效果：  上面的动画效果，非常有意思，核心有两点： 1. 小球随机做 X、Y 方向的直线运动，并且能够实现碰撞到边界的时候，实现反弹效果 2. 小球在碰撞边界的瞬间，颜色发生随机的变化 嗯？很有意思的效果。**看上去，我们好像使用 CSS 实现了碰撞检测**。 然而，实际情况真的是这样吗？让我们一起一探究竟！ ## 实现 X 轴方向的运动 这里其实我们并没有实现碰撞检测，因为小球和小球之间接触时，并没有发生碰撞效果。 我们只实现了，小球与边界之间的碰撞反应。不过这里，也并非碰撞检测，我们只需要设置好单个方向的运动动画，并且设置 `animation-direction: alternate;` 即可！ 下面，我们一起来实现单个方向上的运动动画： ```HTML ``` ```CSS div { position:...
很早之前，就写过一篇与原生嵌套相关的文章 -- [CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？](https://github.com/chokcoco/iCSS/issues/130)，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！  ## CSS 原生嵌套语法 在之前，只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法，像是这样： ```CSS div { & > p { color: red;...
在 [CSS 还原拉斯维加斯球数字动画 - 掘金](https://juejin.cn/post/7290968251911356473) 一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：  其中一个核心点就是，我们利用了如下的代码，在一个 DIV 平面内，实现了单个平面下的随机文字随机颜色效果。 效果如下：  其中的 HTML 代码大致如下： ```HTML // ... 一个 32 个子 div ``` 这里为了实现上述效果，其实是用了 32 列，每列是一个 DIV。...
最近，在 Steam 玩一款老游戏（生化危机 4 重置版），其中，每当游戏转场的过程中，都有这么一个有趣的 Loading 动画：  整个效果有点类似于**日食效果**，中间一圈黑色，向外散发着太阳般的光芒。 本文，我们将尝试使用 CSS，还原这个效果。 整个效果做出来，类似于如下两个动画效果这样：   ## 实现主体效果 其实，整个效果，去掉中间黑色的遮罩，是这个样子的：  所以，我们的目标就变成了，如何使用 CSS，实现上述这个图形效果。 ### 角向渐变 到这里，思考一圈 CSS 中的各种属性，和这个图形能挂上钩的，几乎就只有角向渐变 `conic-gradient` 了。 我们可以利用多重角向渐变，试着画一个类似的图形 -- **从单个颜色到透明，再多次循环铺满...
最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」：  场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震：  我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 CSS 不能实现的？ 本文，就将尝试使用 CSS，大致还原这个效果。 ## 拆解动画效果 其实，上述的动画效果，本质就是一个 3D 立方体。 同时，3D 立方体上每个面存在颜色不一样的文字，文字和颜色都在随机变化。 也就是说，我们需要实现一个 3D 立方体：  同时，我们还需要实现这样一个动画效果 -- 文字和颜色都在随机变化的平面效果：  两者组合一下，再挪动 3D 元素的景深距离，就能实现我们想要的效果！...
怕标题起的有点大，下述技巧如果你已经掌握了看看就好，欢迎斧正，本文希望通过介绍一些 CSS 不太常用的技巧，辅以一些实践，让读者可以更加深入的理解掌握 CSS 动画。 废话少说，直接进入正题，本文提到的动画不加特殊说明，皆指 CSS 动画。 ## 正负旋转相消 嗯。名字起的很奇怪，好像数学概念一样。 在动画中，旋转是非常常用的属性， ```CSS { transform: rotate(90deg); } ``` 那旋转有一些什么高级点的技巧呢？当然是可以改变 `transfrom-origin` ，改变旋转中心点啦。  开个玩笑，改变旋转中心点这个估计大家都知道了，这里要介绍的技巧是利用父级元素正反两个方向的旋转，来制作一些酷炫的 3d 效果。 首先假设一下场景，我们有这样的一层 HTML 结构： ```HTML 正负旋转相消3D动画...
最近，群友分享了一个很有意思的效果：  原效果的网址：[frosted-glass](https://frosted-glass.shud.in/) 该效果的几个核心点： 1. 毛玻璃磨砂效果 2. 卡片的 3D 旋转跟随效果 3. 整体透明度和磨砂感、以及卡片的 3D 形态会随着用户移动鼠标而进行动态变化 原效果实现的较为复杂，并且实际体验卡顿感较强。本文，我们就将尝试一步一步用更为简单的方式还原复现这个效果。 ## 构建基础骨架 首先，我们快速实现整个效果的基础骨架。其核心代码如下： ```HTML ``` ```CSS body { width: 100vw; height: 100vh; background: url(https://picsum.photos/id/242/1920/1080); }...