利用 box-reflect、 conic-gradient 实现光影按钮

前言

webkit-box-reflect 是一个美妙的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。

语法简介

box-reflect：none | <direction> <offset> <mask-box-image>

• below

  可以是 below | above | left | right 代表下上左右，也就是有 4 个方向可以选。

• offset

  可以用长度值来定义倒影与对象之间的间隔。可以为负值；
  可以用百分比来定义倒影与对象之间的间隔。可以为负值。

- mask-box-image
none：无遮罩图像
url：使用绝对或相对地址指定遮罩图像。
linear-gradient：使用线性渐变创建遮罩图像。
radial-gradient：使用径向(放射性)渐变创建遮罩图像。
repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。
repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。

-webkit-box-reflect 基本用法

webkit-box-reflect 的语法非常简单，最基本的用法像是这样：

div {
    -webkit-box-reflect: below;
}

假设我们有如下一张图片：

我们通过 设置方位后，还能再设置一个渐变值，利用这个渐变值，可以实现倒影的一个虚化效果，这一点非常重要。

-webkit-box-reflect: below 16px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.6));

看看效果，有了虚实变化之后，这样就更像是一个倒影.

使用 -webkit-box-reflect 实现一些有意思的动效

感兴趣的可以关注公众号获取源码了解了解