win10的日历背景效果
flyKot2025/10/20
效果预览
1
2
3
4
5
6
分析
- 实际上就是在包裹器中、卡片下方设置一个before
所有卡片公用一个before
- 坐标都相同，全部重合
内部容器inset:2作为可透明边框
- 就是比父容器每个边都往进缩2像素
页面结构
<div class="box">
<div class="card">
<div class="inner">1</div>
</div>
<div class="card">
<div class="inner">2</div>
</div>
<div class="card">
<div class="inner">3</div>
</div>
<div class="card">
<div class="inner">4</div>
</div>
<div class="card">
<div class="inner">5</div>
</div>
<div class="card">
<div class="inner">6</div>
</div>
</div>
css
.box {
width: 600px;
height: 600px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
}
.card {
height: 180px;
width: 280px;
background: rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
left: var(--x, -1000px);
top: var(--y, -1000px);
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent);
filter: blur(40px);
}
.inner {
position: absolute;
inset: 2px;
background-color: #000000db;
color: #fff;
text-align: center;
z-index: 3;
}
js
const container = document.querySelector(".box");
const cards = document.querySelectorAll(".card")
container.onmousemove = function (e) {
for (const card of cards) {
const rect = card.getBoundingClientRect()
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--x", `${x}px`)
card.style.setProperty("--y", `${y}px`)
}
}