iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
如何实现下面这个渐变的边框效果：  这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 ## border-image `border-image` 是 CSS 规范 [CSS Backgrounds and Borders Module Level 3](https://drafts.csswg.org/css-backgrounds-3/#border-images) (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。 顾名思义，我们可以给 border 元素添加 image，类似于 `background-image`，可以是图片也可以是渐变，不再局限于纯色。 ## 使用 border-image...
在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。 我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：  此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：  虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。 这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。 ## 什么是白噪声？ 噪声（Noise）实际上就是一个随机数生成器。 那么，什么是**白噪声**呢？如果从程序员的角度去理解的话，可以理解为我们在 JavaScript 中使用的 `random()` 函数，生成的数大致在 0~1 内是完全随机的。 而噪声的基础是随机数，譬如我们给上述的图形每一个格子添加了一个随机颜色，得到的就是一幅杂乱无章的图形块，没有太多美感可言。 > 白噪声或白杂讯，是一种功率[谱密度](https://baike.baidu.com/item/%E8%B0%B1%E5%AF%86%E5%BA%A6)为常数的随机信号。换句话说，此[信号](https://baike.baidu.com/item/%E4%BF%A1%E5%8F%B7)在各个频段上的功率谱密度是一样的，由于白光是由各种频率（颜色）的单色光混合而成，因而此信号的这种具有平坦[功率谱](https://baike.baidu.com/item/%E5%8A%9F%E7%8E%87%E8%B0%B1)的性质被称作是“白色的”，此信号也因此被称作白噪声。 因为，利用白噪声产生的图形，看起不自然，也不太具备美感。 观察现实生活中的自然噪声，它们不会长成上面的样子。例如木头的纹理、山脉的起伏，它们的形状是趋于分形状（fractal）的，即包含了不同程度的细节，这些随机的成分并不是完全独立的，它们之间有一定的关联。和显然，白噪声没有做到这一点。 ## 柏林噪声 这样，我们就自然而然的引入了**柏林噪声**。 Perlin...
本文将介绍一种巧用 `background` 配合 `backdrop- filter` 来构建有趣的透视背景效果的方式。 本技巧源自于一名群友的提问，如何构建如 [ElementUI](https://element-plus.gitee.io/zh-CN/) 文档的一种顶栏背景特效，看看效果：  仔细看，在页面的的滚动过程中，顶栏的背景不是白色的，也不是毛玻璃效果，而是能够将背景颗粒化：  准确而言，是一种基于**颗粒化的毛玻璃效果**，元素首先是被颗粒化，其次，元素的边缘也是在一定程度上被虚化了。那么，我们该如何实现这个效果呢？ ## 需求拆解 上述效果看似神奇，其实原理也非常简单。主要就是**颗粒化的背景 background**加上`backdrop-filter: blur()` 即可。 首先，我们需要实现颗粒背景。 我们利用 `background` 实现这样一个背景： ```HTML ``` ```CSS div { background: radial-gradient(transparent,...
本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。 首先，我们来看这样一个图形：  一个矩形，没什么特别的，代码如下： ```CSS div { width: 200px; height: 40px; background-color: #000; } ``` 如果，我们现在需要给这个矩形的两端加上**圆角**，像是这样，该怎么做呢：  So easy，不过就是加个 `border-radius` 而已： ```CSS div { width: 200px; height: 40px; + border-radius:...
今天，来实现这样一个有意思的交互效果：  将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。 ## 修改鼠标样式 首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：  正常而言应该是这样：  当然，这里比较简单，在 CSS 中，我们可以通过 `cursor` 样式，对鼠标指针形状进行修改。 ### 利用 `cursor` 修改鼠标样式 cursor [CSS](https://developer.mozilla.org/zh-CN/docs/Web/CSS) 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。 ```CSS cursor: auto; cursor: pointer; ... cursor: zoom-out; /*...
本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性，实现各类有趣、酷炫的动画效果。认真读完，你将会收获到： + 了解 CSS 3D 的各种用途 + 激发你新的灵感，感受动画之美 + 对于提升 CSS 动画制作水平会有所帮助 ## CSS 3D 基础知识 本文默认读者掌握一定的 CSS 3D 知识，能够绘制初步的 3D 动画效果。当然这里会再简单过一下 CSS 3D 的基础知识。 ### 使用...
今天，遇到了一个很有意思的问题，一名群友问我，仅仅使用 CSS，能否实现这样一种响应式的布局效果：  简单解析一下效果： 1. 在屏幕视口较为宽时，表现为一个整体 Table 的样式 2. 而当屏幕视口宽度较小时，原 Table 的每一行数据单独拆分为一个 Table 进行展示 很有意思的一个响应式布局，让信息在小屏幕下得到了一种不错的展示。 那么，仅仅使用 CSS 的话，能否实现这样一个布局呢？答案是**可以的**。 首先，肯定会用到**媒体查询**，这个不难看出。另外，我们观察下拆分后的每一组数据：  都会存在一组原本整体一个 Table 时的表头信息，主要的难点就是在这里，我们如何在拆分成一个一个的子 Table 展示时，同时展示这些表头信息？ ## 基本结构的实现 首先，我们先实现常规宽屏下的 HTML 及对应的...
之前在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性： ```CSS { transform-style: preserve-3d; perspective: 1000; transform: translate3d(); } ``` 这个 Demo 你可以戳这里，大概是这样：[CodePen Demo - 3D ball](https://codepen.io/Chokcoco/pen/JwdvmJ):  嗯，大概到了这个效果，想到了 **CSS 混合模式** ```mix-blend-mode```，寻思着，利用混合模式，是否能让效果更上一层楼或者碰撞出一些其他火花。 >...
在 [WeGame](https://www.wegame.com.cn/client/) 的 PC 端官网首页，有着非常多制作精良的**基于滚动**的动画效果。 这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。转场动画 1：  转场动画 2：  是不是挺有意思的，整个动画的衔接是基于滚轮的滚动触发的。我猜测是使用了类似 [TweenMaxJS](https://www.tweenmax.com.cn/index.html) 的动画库实现。 当然，这两处酷炫有意思的转场动画，基于最新的 CSS @scroll-timeline 规范，也是可以大致实现的。本文就将尝试使用纯 CSS，模拟上述的两个转场动画。 当然，关于 CSS 最新的 CSS @scroll-timeline 规范，如果你还没有详细了解过，可以先看看我的这篇文章 [来了来了，它终于来了，动画杀手锏 @scroll-timeline](https://github.com/chokcoco/iCSS/issues/166) ##...
最近，在 CodePen 上看到这样一个非常有意思的效果：  这个效果的核心难点在于气泡的一种特殊融合效果。 其源代码在：[CodePen Demo -- Goey footer](https://codepen.io/z-/pen/zYxdRQy)，作者主要使用的是 **SVG 滤镜**完成的该效果，感兴趣的可以戳源码看看。 其中，要想灵活运用 SVG 中的 `feGaussianBlur` 滤镜还是需要有非常强大的 SVG 知识储备的。那么，仅仅使用 CSS 能否实现该效果呢？ 嘿嘿，强大的 CSS 当然是可以的。本文，就将带领大家一步步使用纯 CSS，完成上述效果。 ## 借助 SASS 完成大致效果 首先，如果上述效果没有气泡的融合效果，可能就仅仅是这样：...