分布图层悬停效果

分布图层悬停效果

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

两个视频的内容相同，第二个为转载

效果图

代码区

html

  <div class="container">
		<div class="imgBx">
			<img src="img/bg.jpg">
			<img src="img/bg.jpg">
			<img src="img/bg.jpg">
		</div>
		<h2><!--自行添加--></h2>
		<div class="skew">
			<p>
        <!-- 自行添加英语 -->
      </p>
      <a href="#">Read Me</a>
		</div>
	</div>

CSS

* {
  margin: 0; /* 外边距 */
  padding: 0; /* 内边距 */
  font-family: sans-serif; /* 字体样式 */
}
body {
  display: flex; /* 弹性盒模型 */
  justify-content: center; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  background: #111; /* 背景颜色 */
  flex-direction: column; /* 排列方式：竖向 */
}
.container {
  position: relative; /* 相对定位 */
  margin-top: 250px;
  max-width: 800px; /* 最大宽度 */
  transform: skewY(-20deg) translate3d(0, 0, 0); /* 倾斜，开启3D加速 */
}
.container .imgBx{
  position: relative;
  width: 100%;
  height: 180px;
  transform-origin: bottom; /* 动画从哪边执行 */
  transform: skewX(45deg);
  /* overflow: hidden; */
}
.container .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  filter: grayscale(1); /* 灰阶调整 */
  width: 100%;
  height: 100%;
  transition: 0.5s; /* 过渡时间 */
}
/* 层叠效果实现 */
.container .imgBx:hover img{ /* 添加色彩 */
  filter: grayscale(0);
}
.container .imgBx:hover img:nth-child(3) {
  /* 移动实现层叠效果 */
  transform: translate(100px, -100px);
}
.container .imgBx:hover img:nth-child(2) {
  transform: translate(50px, -50px);
  opacity: 0.5; /* 透明度 */
}
.container .imgBx:hover img:nth-child(1) {
  transform: translate(0px, 0px);
  opacity: 0.1;
}
/* 下部文字 */ 
.container h2 {
  position: relative;
  color: #fff;
  font-size: 4em;
  transform:translate3d(0, 0, 0); /* 开启3D加速，防止抖动 */
}
.container .skew {
  transform-origin: top;
  transform: skewX(45deg) translate3d(0, 0, 0);
}
.container .skew p {
  color: #fff;
  font-size: 1.2em;
}
/* 按钮 */
.container .skew a {
  position: relative;
  padding: 10px 30px;
  display: inline-block; /* 行内盒模型 */
  background: transparent; /* 背景透明 */
  color: #fff;
  transform-origin: top;
  margin-top: 20px;
  border: 2px solid #fff; /* 边框 */
  transform: skewX(-45deg);
  letter-spacing: 2px; /* 字符间距 */
  text-decoration: none; /* 清除字符装饰 */
  font-size: 20px;
  transition: 0.5s;
}
.container .skew a:hover {
  background: #fff;
  color: #000;
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）