聊聊CSS中的黑科技
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4702143/e5da6e35dd1b4ecb8d766e72b69214a1.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4705845/t1.jpg)
创造性&想象力
还有这种操作???
Single Div
Single Mario
黑科技成分:
-
多背景
-
渐变(线性/径向)
-
盒阴影
-
content生成内容
-
...
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4706746/mq.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4707109/m2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4707446/m3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713307/code1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713310/code2.png)
有趣的按钮
Parallax 3D Button
CREATED BY Tobias Reich
Mouse Movement Button
CREATED BY Tobias Reich
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4710347/k1.jpg)
黑科技成分:
-
径向渐变
-
transform变换
-
JS
-
CSS变量(划重点)
JS控制CSS变量
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713304/code3.png)
变量名称
变量默认值
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713340/code4.png)
通过setProperty方法给css变量设值
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713536/code5.png)
1.通过JS获取到鼠标在按钮上的相对坐标
2.创造属于自己的“纸盒玩具”吧!
栗子
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713670/code7.png)
变量存放鼠标位置
calc配合变量使用很方便
全局变量
三个点
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4713722/code8.png)
按钮中的渐变处理
存放鼠标在按钮中的相对坐标,
作为渐变元素的中心
hover时改变透明度变量的值,
配合transition实现过渡
Ripple effect using CSS Variables
CREATED BY jakob-e
浏览器兼容性
色色的投影
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718408/bt1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718436/bt3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718438/bt4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718445/bt5.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718464/bt6.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4710347/k1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718494/q1.jpg)
栗子
黑科技成分:
-
伪元素
-
transform变换
-
blur滤镜
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4718638/code9.png)
继承主元素的渐变背景
blur滤镜模糊
调整显示的位置、尺寸
浏览器兼容性
故障艺术
Glitch Art
故障艺术(Glitch Art),就是利用事物形成的故障,进行艺术加工,使这种故障缺陷反而成为一种艺术品,具有特殊的美感。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4721900/tumblr_nl45wmLmI81qjjl87o1_540.gif)
Text Glitch Effect
CREATED BY Simon Shahriveri
CSS-Only Glitch Effect
CREATED BY Justin
Image Glitch Effect
CREATED BY Mary Lou
主元素
::before
::after
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4722958/g1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4722974/g2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/845644/images/4722996/g3.png)
聊聊CSS中的黑科技
By Kola Wang
聊聊CSS中的黑科技
- 544