iCSS

用最标准的用法和最简洁的CSS代码实现相关Web需求。

chokcoco 的这个 CSS 技巧 Git 仓库主要通过 Issues 分享了一些 CSS 动画（Web动画）的案例，覆盖比较全，可谓是「包罗万象」，里面提供了很多炫酷、实用的 Web 前端开发动画需求的示例。用 chokcoco 的原话就是「不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节」。

CSS 动画案例目录

• 1、下面这个左边竖条图形，只使用一个标签，可以有多少种实现方式：
• 2、类似下面这样的条纹边框，只使用一个标签，可以有多少种实现方式 – 从条纹边框的实现谈盒子模型：
• 3、层叠顺序（stacking level）与堆栈上下文（stacking context）知多少？
• 4、从倒影说起，谈谈 CSS 继承 inherit
• 5、纯 CSS 实现单行居中显示文字，多行居左显示，最多两行超过用省略号结尾
• 6、全兼容的多列均匀布局问题
• 7、全兼容的最后一条边界线问题
• 8、纯CSS的导航栏Tab切换方案
• 9、巧妙的多列等高布局
• 10、巧妙的实现 CSS 斜线
• 11、IFC、BFC、GFC 与 FFC 知多少
• 12、结构性伪类选择器
• 13、引人瞩目的 CSS 自定义属性（CSS Variable）
• 14、CSS命名方式是否有必要规范
• 15、reset.css 知多少
• 16、你该知道的字体 font-family
• 17、再探究字体的渲染规则及 fallback 机制
• 18、使用 position:sticky 实现粘性布局
• 19、深入探讨 CSS 特性检测 @supports 与 Modernizr
• 20、巧妙地制作背景色渐变动画！
• 21、提高 CSS 动画性能的正确姿势 | 盒子端 CSS 动画性能提升研究
• 22、纯 CSS 方式实现 CSS 动画的暂停与播放
• 23、谈谈 CSS 关键字 initial、inherit 和 unset
• 24、纯 CSS 实现瀑布流布局
• 25、vh、vw、vmin、vmax 知多少
• 26、奇妙的-webkit-background-clip: text
• 27、神奇的 conic-gradient 角向渐变
• 28、不可思议的混合模式 mix-blend-mode
• 29、不可思议的混合模式 background-blend-mode
• 30、奇妙的 CSS shapes（CSS图形）
• 31、纯 CSS 实现波浪效果!
• 32、CSS 新特性contain，控制页面的重绘与重排
• 33、fixed 定位失效 || 不受控制的 position:fixed
• 34、你所不知道的 CSS 动画技巧与细节
• 35、你所不知道的 CSS 滤镜技巧与细节
• 36、text-fill-color 与 color 的异同
• 37、两行 CSS 代码实现图片任意颜色赋色技术
• 38、不可思议的纯 CSS 导航栏下划线跟随效果
• 39、妙用 scale 与 transfrom-origin，精准控制动画方向
• 40、Pure CSS Button Effect
• 41、神奇的选择器 :focus-within
• 42、滚动视差? CSS不在话下
• 43、你所不知道的 CSS 阴影技巧与细节
• 44、探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
• 45、不可思议的纯 CSS 进度条效果
• 46、有趣的 box-decoration-break
• 47、不可思议的纯 CSS 实现鼠标跟随
• 48、CSS 火焰，不在话下
• 49、巧妙使用 CSS 控制动画行进
• 50、探秘 flex 上下文中神奇的自动 margin
• 51、CSS 属性选择器的深入挖掘
• 52、A Guide to CSS Rules
• 53、你所不知道的 CSS 负值技巧与细节
• 54、Web 字体 font-family 再探秘
• 55、CSS 阴影动画优化技巧一则
• 56、在 CSS 中使用三角函数绘制曲线图形及展示动画
• 57、使用 sroll-snap-type 优化滚动
• 58、巧用 CSS 实现酷炫的充电动画
• 59、深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）
• 60、巧妙实现带圆角的渐变边框
• 61、CSS 故障艺术
• 62、使用 display: contents 增强页面语义
• 63、奇妙的 CSS MASK
• 64、CSS 技巧一则 – 不定宽溢出文本适配滚动
• 65、使用 tabindex 配合 focus-within 巧妙实现父选择器
• 66、CSS 艺术 – 使用 background 创造各种美妙的背景
• 67、探究 position-sticky 失效问题
• 68、使用纯 CSS 实现滚动阴影效果
• 69、一行 CSS 代码的魅力
• 70、水平垂直居中深入挖掘
• 71、如何不使用 overflow: hidden 实现 overflow: hidden？
• 72、CSS 技巧一则：动态高度过渡动画
• 73、CSS 奇思妙想边框动画
• 74、生僻标签 fieldset 与 legend 的妙用
• 75、CSS奇思妙想 – 使用 CSS 创造艺术图案
• 76、你可能不知道的 transition 技巧与细节
• 77、使用 mask 实现视频弹幕人物遮罩过滤
• 78、巧用 -webkit-box-reflect 倒影实现各类动效
• 79、奇思妙想 CSS 文字动画
• 80、小技巧！CSS 整块文本溢出省略特性探究
• 81、有意思！不规则边框的生成方案
• 82、巧用 SVG 滤镜制作有意思动效
• 83、老生常谈之 CSS 实现三角形
• 84、CSS 文字装饰 text-decoration & text-emphasis
• 85、CSS @property，让不可能变可能
• 86、CSS 还能这样玩？奇思妙想渐变的艺术
• 87、新时代布局中一些有意思的特性
• 88、探秘神奇的曲线动画 motion-path
• 89、一种巧妙的使用 CSS 制作波浪效果的思路
• 90、小技巧！CSS 提取图片主题色功能探索
• 91、使用 CSS prefers-* 规范，提升网站的可访问性与健壮性
• 92、有意思的 ::maker 伪元素
• 93、新时代创意布局不完全指南
• 94、Single Div 绘图技巧
• 95、CSS ::marker 让文字序号更有意思
• 96、Web 动画原则及技巧浅析
• 97、试试酷炫的 3D 视角
• 98、CSS 奇思妙想 | 全兼容的毛玻璃效果
• 99、巧妙的实现带圆角的三角形
• 100、CSS 世界中的方位与顺序
• 101、【Web动画】科技感十足的暗黑字符雨动画
• 102、CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？
• 103、CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
• 104、奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？
• 105、巧用模糊实现文字的 3D 效果
• 106、实现一个会动的鸿蒙 LOGO
• 107、妙用 background 实现花式文字效果
• 108、CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
• 109、CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果
• 110、小技巧 | 一行代码实现头像与国旗的融合
• 111、利用 CSS Overview 面板重构优化你的网站
• 112、CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框
• 113、仅仅使用 HTML/CSS 实现进度条的 N 种方式
• 114、3D 穿梭效果？使用 CSS 轻松搞定
• 115、巧用滤镜实现高级感拉满的文字快闪切换效果
• 116、巧用渐变实现高级感拉满的背景光动画
• 117、使用 CSS 轻松实现一些高频出现的奇形怪状按钮
• 118、利用 clip-path 实现动态区域裁剪
• 119、神奇的滤镜！巧妙实现内凹的平滑圆角
• 120、Amazing！！CSS 也能实现极光？
• 121、Amazing！！CSS 也能实现烟雾效果？
• 122、深入探讨 filter 与 backdrop-filter 的异同
• 123、妙用滤镜构建高级感拉满的磨砂玻璃渐变背景
• 124、深入浅出 CSS 动画
• 125、巧用 CSS 实现动态线条 Loading 动画
• 126、LPL Ban/Pick 选人阶段的遮罩效果是如何实现的？
• 127、疑难杂症：运用 transform 导致文本模糊的现象探究
• 128、扫盲贴：2021 CSS 最冷门特性都是些啥？
• 129、巧用 CSS 实现炫彩三角边框动画
• 130、小技巧 | 渐变消失遮罩的多种实现方式
• 131、突破限制，CSS font-variation 可变字体的魅力
• 132、来了来了，它终于来了，动画杀手锏 @scroll-timeline
• 133、巧用 CSS 构建渐变彩色二维码
• 134、系统性学习 CSS 指南及全 DEMO 练习
• 135、利用混合模式，让文字智能适配背景颜色
• 136、CSS 阴影进阶，实现更加的立体的阴影效果！
• 137、2022 年最受瞩目的新特性 CSS @layer 到底是个啥？
• 138、一道有意思的 CSS 面试题，FizzBu​​zz ~
• 139、巧用 background-clip 实现超强的文字动效
• 140、现代 CSS 解决方案：Modern CSS Reset
• 141、Amazing！巧用 CSS 视差实现酷炫交互动效
• 142、让交互更加生动！有意思的鼠标跟随 3D 旋转动效
• 143、离谱的 CSS！从表盘刻度到艺术剪纸
• 144、现代 CSS 解决方案：CSS 数学函数
• 145、浅谈逻辑选择器 is、where、not、has
• 146、动画小技巧，通过 hover 让动画只运行一次且停留在最后一帧
• 147、文字轮播与图片轮播？CSS 不在话下
• 148、使用 content-visibility 优化渲染性能
• 149、有意思的鼠标指针交互探究
• 150、超 Nice 的表格响应式布局小技巧
• 151、使用纯 CSS 实现超酷炫的粘性气泡效果
• 152、高阶切图技巧！基于单张图片的任意颜色转换
• 153、利用噪声构建美妙的 CSS 图形
• 154、超酷炫的转场动画？CSS 轻松拿下！
• 155、圆角大杀器，使用滤镜构建圆角及波浪效果！
• 156、妙用 CSS 构建花式透视背景效果
• 157、使用 CSS 构建强大且酷炫的粒子动画
• 158、多行文本下的文字渐隐消失术
• 159、妙啊！纯 CSS 实现拼图游戏
• 160、巧用 transition 实现短视频 APP 点赞动画
• 161、有意思的方向裁切 overflow: clip
• 162、高阶 CSS 技巧在复杂动效中的应用
• 163、有意思的水平横向溢出滚动
• 164、新时代布局新特性 – 容器查询
• 165、单标签实现复杂的棋盘布局
• 166、两道超有意思的 CSS 面试题，试试你的基础
• 167、超强的纯 CSS 鼠标点击拖拽效果
• 168、超强的苹果官网滚动文字特效实现
• 169、CSS 渐变锯齿消失术
• 170、CSS at-rules(@) 规则扫盲