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

效果展示

页面结构组成

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

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

CSS 知识点

  • transform
  • linear-gradient

实现页面结构布局

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

实现渐变色的底层方块

css 复制代码
.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);
}

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

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

完整代码下载

完整代码下载

相关推荐
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端17 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧17 小时前
Promise 的使用
前端·javascript