记录学习CSS新属性、新技巧的使用，推荐不错的CSS学习资源iCSS和《CSS揭秘》......
backgroud-clip: text;
我的颜色为背景图片的颜色！ 111111111111111111111111 111111111111111111111111 111111111111111111111111 111111111111111111111111 111111111111111111111111 111111111111111111111111 111111111111111111111111 111111111111111111111111
PS：主要使用了background-image: url(..); 和 background-clip: text; 和 color: transparent;等属性配合使用
conic-gradient 需要垫片
PS：使用了leaverou的库将我们的圆锥渐变转变为图片，配合元素的伪类来实现仪表盘的各个部分，再添加 animation 和 transform。
波浪-svg版
50%
波浪-canvas版
导航下划线左进右出动画
鼠标移入移出
Loading 加载

加载中...

加载中

蚂蚁行军border效果
蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果蚂蚁行军效果
PS：实现思路，设置透明的一像素border（牵涉到stack context相关知识），设置padding-box为white背景的linear-gradient，设置boder-box到padding-box为white和black背景的repeating-linear-gradient，在根据background-position来实现动画
毛玻璃效果
毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果毛玻璃效果
PS：css滤镜blur和通过 z-index 为负值控制 Stack context 顺序
折角效果
折角效果折角效果折角效果折角效果折角效果折角效果折角效果
PS：使用了两个 linear-gradient 的叠加，设计到渐变的定位（三角形相关的数学知识）
复选框
PS：使用相邻选择器（+）、伪类:checked、label标签（通过id关联）及伪元素、clip: rect(0,0,0,0)隐藏原生的checkbox并且是tabIndex有效
滚动提示
  • Ada Catlace
  • Alan Purring
  • Schr ö dingcat
  • Tim Purrners-Lee
  • WebKitty
  • Json
  • Void
  • Neko
  • NaN
  • Cat5
  • Vector
PS：background-attachment: local; 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。
反弹的小球
打字动画
CSS is awesome!