CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果

背景

最近在支付宝小程序上面要实现图片的镜面倒影效果,于是乎,马上找到了-webkit-box-reflect属性,用上之后真的绝绝子,模拟器上也很完美,可是到真机上一看,iOS 不支持,只有安卓手机支持,这下只能另辟蹊径了,自己画一个呗。

实现方式

方式一:-webkit-box-reflect 属性

布局

<view class="card">
  <image class="card-image" mode="widthFix" src="https://tinypng.com/images/panda-chewing.png" />
  <view class="reflect-box">
    <image class="card-image reflect-image" mode="widthFix" src="https://tinypng.com/images/panda-chewing.png" />
    <view class="reflect-cover">view>
  view>
view>

样式

.card {
  position: relative;
  margin-top: 60rpx;
  width: 540rpx;
  height: 340rpx;
  border-radius: 25rpx;
}

.card .card-image {
  width: 540rpx;
  height: 540rpx;
  border-radius: 25rpx;
  filter: drop-shadow(0 6rpx 14rpx rgba(0, 0, 0, 0.12));
  -webkit-box-reflect: below 5rpx -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.3));
}

效果

CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果_第1张图片

方式二:将图片翻转后,用蒙层罩起来

布局

<view class="card">
  <image class="card-image" mode="widthFix" src="https://tinypng.com/images/panda-chewing.png" />
view>

样式

.card {
  position: relative;
  margin-top: 60rpx;
  width: 540rpx;
  height: 340rpx;
  border-radius: 25rpx;
}

.card .card-image {
  width: 540rpx;
  height: 540rpx;
  border-radius: 25rpx;
  filter: drop-shadow(0 6rpx 14rpx rgba(0, 0, 0, 0.12));
}

.card .reflect-box {
  position: relative;
  top: -5rpx;
  width: 540rpx;
  height: 540rpx;
  overflow: hidden;
}

.card .reflect-box .reflect-image {
  width: 540rpx;
  height: 540rpx;
  filter: none;
  transform: rotateX(180deg);
}

.card .reflect-box .reflect-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 540rpx;
  height: 540rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.53) 0, #FFF 99.00%);
  border-radius: 25rpx 25rpx 0 0;
}

效果

CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果_第2张图片

部分镜面倒影

方式一:-webkit-box-reflect 属性

.card {
  position: relative;
  margin-top: 60rpx;
  width: 540rpx;
  height: 340rpx;
  border-radius: 25rpx;
}

.card .card-image {
  width: 540rpx;
  height: 540rpx;
  border-radius: 25rpx;
  filter: drop-shadow(0 6rpx 14rpx rgba(0, 0, 0, 0.12));
  -webkit-box-reflect: below 5rpx -webkit-linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3));
}

CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果_第3张图片

方式二:图片外层盒子设置镜面倒影的高度即可

.card {
  position: relative;
  margin-top: 60rpx;
  width: 540rpx;
  height: 340rpx;
  border-radius: 25rpx;
}

.card .card-image {
  width: 540rpx;
  height: 540rpx;
  border-radius: 25rpx;
  filter: drop-shadow(0 6rpx 14rpx rgba(0, 0, 0, 0.12));
}

.card .reflect-box {
  position: relative;
  top: -5rpx;
  width: 540rpx;
  height: 270rpx;
  overflow: hidden;
}

.card .reflect-box .reflect-image {
  width: 540rpx;
  height: 540rpx;
  filter: none;
  transform: rotateX(180deg);
}

.card .reflect-box .reflect-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 540rpx;
  height: 270rpx;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.53) 0, #FFF 99.00%);
  border-radius: 25rpx 25rpx 0 0;
}

CSS 仿 -webkit-box-reflect 属性实现 图片 镜面 倒影 效果_第4张图片

你可能感兴趣的:(前端,微信小程序,css,webkit,前端)