效果展示

页面结构组成

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

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);
}

完整代码下载

完整代码下载