巧用 -webkit-box-reflect 倒影实现各类动效(小结)

下面我将详细讲解 "巧用 -webkit-box-reflect 倒影实现各类动效(小结)" 的完整攻略。

什么是 -webkit-box-reflect

-webkit-box-reflect 是一个Webkit私有属性，用于在元素的周围添加一个反射效果，在某些情况下可以实现一些有趣的效果。

-webkit-box-reflect 主要有以下两个属性：

• -webkit-box-reflect: below <size>? <offset>? <mask-box-image>?;： 设置元素的下部添加反射。该属性支持三个值：

• below: 表示添加反射效果。

• <size>： 设置反射区域的大小。默认为元素的宽度和高度。

• <offset>： 设置反射区域离元素的位置。默认值为 0 0。

• <mask-box-image>：将一个图片遮罩应用于反射，使其被裁剪。默认为空。

• -webkit-box-reflect: above <size>? <offset>? <mask-box-image>?;：设置元素的上部添加反射。属性值同上。

巧用 -webkit-box-reflect 实现动效

动态图片翻转

将两张反射图增加 rotateY（绕Y轴旋转）的动效，通过“柜子的门打开”或“书翻页”的效果，实现动态图片翻转。

代码示例：

<div class="rotate-effect">
  <div class="rotate-front">
      <img src="01.jpg">
  </div>
  <div class="rotate-back">
      <img src="02.jpg">
  </div>
</div>

.rotate-effect {
  position: relative;
  display: inline-block;
  margin: 50px;
  width: 180px;
}

.rotate-front, .rotate-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.rotate-back {
  -webkit-box-reflect: below 0px -webkit-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0.0));
}

.rotate-effect:hover .rotate-front {
  transform: rotateY(180deg);
  transition: all 0.4s forwards;
}

.rotate-effect:hover .rotate-back {
  transform: rotateY(0deg);
  transition: all 0.4s forwards;
}

名片翻转效果

实现一个名片翻转的效果，可以在名片正反两个面之间自由切换。

代码示例：

<div class="card">
  <div class="card-front">
      <img src="card_front.png">
  </div>
  <div class="card-back">
      <img src="card_back.png">
  </div>
</div>

.card {
  width: 240px;
  height: 360px;
  position: relative;
  margin: 50px auto;
  perspective: 400px;
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-box-reflect: below 1px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(90%,transparent),to(rgba(255,255,255,.4)));
}

.card-front {
  transform: rotateX(0deg);
}

.card-back {
  transform: rotateX(180deg);
}

.card-flip:hover .card-front {
  transform: rotateX(-180deg);
  transition: all 1s;
}

.card-flip:hover .card-back {
  transform: rotateX(0deg);
  transition: all 1s;
}

以上就是两个实例，讲解了如何使用 -webkit-box-reflect 实现动态图片翻转和名片翻转效果。使用该属性时，需要清楚理解其参数和使用方式，才能实现更富创意的效果。