灵活运用CSS开发技巧（第三章）

朱雀 2021-01-29 09:45 746阅读 0赞

# 灵活运用CSS开发技巧（第三章）
[灵活运用CSS开发技巧(第一章)](/article/details/1355079608122822658)

[灵活运用CSS开发技巧(目 录)](/article/details/1355076689545744385)

### Component Skill

### 迭代计数器

- 要点：累加选项单位的计数器
- 场景：**章节目录**、**选项计数器**、**加法计数器**
- 兼容：[counters](https://caniuse.com/#search=counters)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/rXqRPo)

![](/images/1611912657561.jpg)

### 下划线跟随导航栏

- 要点：下划线跟随鼠标移动的导航栏
- 场景：**动态导航栏**
- 兼容：[+](https://caniuse.com/#search=+)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/eYOJbNv)

### 气泡背景墙

- 要点：不间断冒出气泡的背景墙
- 场景：**动态背景**
- 兼容：[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/GRKoPdK)

![](/images/1611912689099.jpg)

### 滚动指示器

- 要点：提示滚动进度的指示器
- 场景：**阅读进度**
- 兼容：[calc()](https://caniuse.com/#search=calc%28%29)、[gradient](https://caniuse.com/#search=gradient)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/ExYPMog)

![](/images/1611912713977.jpg)

### 故障文本

- 要点：显示器故障形式的文本
- 场景：**错误提示**
- 兼容：[data-*](https://caniuse.com/#search=data-)、[attr()](https://caniuse.com/#search=attr%28%29)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/xxKZNYv)

![](/images/1611912802935.jpg)

### 换色器

- 要点：通过拾色器改变图像色相的换色器
- 场景：**图片色彩变换**
- 兼容：[mix-blend-mode](https://www.caniuse.com/#search=mix-blend-mode)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/vYBLqBm)

![](/images/1611912830501.jpg)

### 状态悬浮球

- 要点：展示当前状态的悬浮球
- 场景：**状态动态显示**、**波浪动画**
- 兼容：[gradient](https://caniuse.com/#search=gradient)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/WNewOxa)

![](/images/1611912854787.jpg)

粘粘球

- 要点：相交粘粘效果的双球回弹运动
- 场景：**粘粘动画**
- 兼容：[filter](https://caniuse.com/#search=filter)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/zYOqdBz)

![](/images/1611913088769.jpg)

商城票券

- 要点：边缘带孔和中间折痕的票劵
- 场景：**电影票**、**代金券**、**消费卡**
- 兼容：[gradient](https://caniuse.com/#search=gradient)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/rNBeYza)

![](/images/1611913124220.jpg)

倒影加载条

- 要点：带有渐变倒影的加载条
- 场景：**加载提示**
- 兼容：[box-reflect](https://caniuse.com/#search=box-reflect)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/GRKZzpg)

![](/images/1611913153220.jpg)

三维立方体

- 要点：三维建模的立方体
- 场景：**三维建模**
- 兼容：[transform](https://caniuse.com/#search=transform)、[perspective](https://caniuse.com/#search=perspective)、[transform-style](https://caniuse.com/#search=transform-style)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/PoYNgXY)

![](/images/1611913180572.jpg)

动态边框

- 要点：鼠标悬浮时动态渐变显示的边框
- 场景：**悬浮按钮**、**边框动画**
- 兼容：[gradient](https://caniuse.com/#search=gradient)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/qBWZPvE)

![](/images/1611913208088.jpg)

标签页

- 要点：可切换内容的标签页
- 场景：**内容切换**
- 兼容：[scroll-behavior](https://caniuse.com/#search=scroll-behavior)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/JjPRjMd)

![](/images/1611913232828.jpg)

标签导航栏

- 要点：可切换内容的导航栏
- 场景：**页面切换**
- 兼容：[~](https://caniuse.com/#search=~)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/oNvzoZg)

![](/images/1611913258756.jpg)

折叠面板

- 要点：可折叠内容的面板
- 场景：**隐藏式子导航栏**
- 兼容：[~](https://caniuse.com/#search=~)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/NWKRMjo)

![](/images/1611913282123.jpg)

星级评分

- 要点：点击星星进行评分的按钮
- 场景：**评分**
- 兼容：[~](https://caniuse.com/#search=~)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/MWgjGMj)

![](/images/1611913311772.jpg)

加载指示器

- 要点：变换`...`长度的加载提示
- 场景：**加载提示**
- 兼容：[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/wvwoRbN)

![](/images/1611913324556.jpg)

自适应相册

- 要点：自适应照片数量的相册
- 场景：**九宫格相册**、**微信相册**、**图集**
- 兼容：[:only-child](https://caniuse.com/#search=%253Aonly-child)、[:first-child](https://caniuse.com/#search=%253Afirst-child)、[:nth-child()](https://caniuse.com/#search=%253Anth-child%28%29)、[:nth-last-child()](https://caniuse.com/#search=%253Anth-last-child%28%29)、[~](https://caniuse.com/#search=~)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/pozNGyj)

![](/images/1611913354683.jpg)

圆角进度条

- 要点：单一颜色的圆角进度条
- 场景：**进度条**
- 兼容：[gradient](https://caniuse.com/#search=gradient)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/jONBxaK)

![](/images/1611913392061.png)

螺纹进度条

- 要点：渐变螺纹的进度条
- 场景：**进度条**、**加载动画**
- 兼容：[gradient](https://caniuse.com/#search=gradient)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/GRKrJJX)

![](/images/1611913415405.jpg)

立体按钮

- 要点：点击呈现按下状态的按钮
- 场景：**按钮点击**
- 兼容：[box-shadow](https://caniuse.com/#search=box-shadow)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/PoYpaLL)

![](/images/1611913430188.jpg)

混沌加载圈

- 要点：带混沌虚影的加载圈
- 场景：**加载提示**
- 兼容：[filter](https://caniuse.com/#search=filter)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/aboWbqG)

![](/images/1611913459910.jpg)

蛇形边框

- 要点：蛇形运动的边框
- 场景：**蛇形动画**
- 兼容：[clip](https://caniuse.com/#search=clip)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/GRKmgZZ)

![](/images/1611913486232.jpg)

自动打字

- 要点：逐个字符自动打印出来的文字
- 场景：**代码演示**、**文字输入动画**
- 兼容：[ch](https://caniuse.com/#search=ch)、[animation](https://www.caniuse.com/#search=animation)
- 代码：[在线演示](https://codepen.io/JowayYoung/pen/ZEzKQEx)

![](/images/1611913509212.jpg)

**总结**
写到最后总结得差不多了，如果后续我想起还有哪些遗漏的**CSS开发技巧**，会继续在这篇文章上补全。