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

效果展示

页面结构组成

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

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

完整代码下载

完整代码下载

相关推荐
用户3802258598244 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo521006 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员12 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_14 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子15 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a19 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心19 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq20 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
长路 ㅤ   32 分钟前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
独立开阀者_FwtCoder1 小时前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github