渐变色毛玻璃形态卡悬停效果

效果展示

渐变玻璃形态卡悬停效果.png

页面结构组成

从上述的效果展示可以看出，页面的组成部分主要包含这几个部分：

1. 渐变色的底层方块
2. 毛玻璃的内容层
3. 内容层上的两个小方块

CSS 知识点

• transform
• linear-gradient

实现页面结构布局

<div class="box">
  <span></span>
  <div class="content">
    <h2>排球</h2>
    <p>
      排球，是一种团体球类运动，双方各6名球员上场，隔着排球网分立场地两侧，比赛的目标是将球击过网，其目的在于用手击球以令球落至对方场中地面而得分。
    </p>
    <a href="#">阅读更多</a>
  </div>
</div>

实现渐变色的底层方块

.container .box {
  position: relative;
  width: 320px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.container .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

/* 实现底层方块四周的扩散的阴影效果 */
.container .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
  transition: 0.5s;
}

/* 设置底层方块的颜色，这里只是展示一个 */
.container .box:nth-child(1)::before,
.container .box:nth-child(1)::after {
  background: linear-gradient(315deg, #ffbc00, #ff0058);
}

实现渐变色底层方块鼠标悬停后的交互效果

.container .box:hover::before,
.container .box:hover::after {
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
}

完整代码下载

完整代码下载