对动画进行说明似乎也是个好主意。我的原始回复可以在下面阅读。
这很简单。我们使用 JavaScript 设置鼠标移动事件的侦听器。发生这种情况时,我们根据
.blob
(固定位置)类的位置和当前光标位置来调整 .fakeblob
类的位置。这样,当您移动鼠标光标时,卡片上会出现一个微弱的圆圈。通过使用 CSS z-index 设置,我们确保圆圈仅在卡片内可见。享受尝试该模式的乐趣!
这个想法的灵感来自于代码“yxsh”。
const all = document.querySelectorAll(".grid > div");
/* event listener for mouse moving */
window.addEventListener("mousemove", (ev) => {
/* set blob on all elements */
all.forEach((e) => {
const blob = e.querySelector(".blob");
const fakeblob = e.querySelector(".fakeblob");
const rec = fakeblob.getBoundingClientRect();
blob.style.opacity = "1";
blob.animate([{
transform: `translate(${
(ev.clientX - rec.left) - (rec.width / 2)
}px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
}], {
duration: 300,
fill: "forwards"
});
});
});
:root {
--blob-color: rgb(255, 255, 255, 0.5); /* to animation */
--blob-size: 100px; /* to animation */
--blob-strong: 40px; /* to animation */
}
/* grid */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
box-sizing: border-box;
width: 500px;
height: 300px;
background-image: url(https://i.stack.imgur.com/QYZq3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* element */
.grid > div {
position: relative; /* <--- to animation */
overflow: hidden;
padding: 3px;
margin: 0;
}
/* element parts: inner, blob, fakeblob */
/* inner: to readable content */
.grid > div > .inner {
position: relative;
z-index: 1;
border-radius: 7px;
padding: 10px;
width: 210px;
height: 150px;
color: white;
backdrop-filter: blur(1px); /* <--- to readable text */
}
/* blob: to animation */
.grid > div > .blob {
filter: blur(var(--blob-strong));
position: absolute;
z-index: 0;
top: 0;
opacity: 0;
left: 0;
width: var(--blob-size);
height: var(--blob-size);
border-radius: 50%;
background: var(--blob-color);
}
/* fakeblob: to animation */
.grid > div > .fakeblob {
display: hidden;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: calc(var(--blob-size) * 0.8);
height: calc(var(--blob-size) * 0.8);
border-radius: 50%;
}
<div class="grid">
<div>
<div class="inner">Text Here</div>
<div class="blob"></div>
<div class="fakeblob"></div>
</div>
<div>
<div class="inner">Text Here</div>
<div class="blob"></div>
<div class="fakeblob"></div>
</div>
<div>
<div class="inner">Text Here</div>
<div class="blob"></div>
<div class="fakeblob"></div>
</div>
<div>
<div class="inner">Text Here</div>
<div class="blob"></div>
<div class="fakeblob"></div>
</div>
</div>
linear-gradient()
或 radial-gradient
。
background
参数。对于渐变边框,您可以使用 border-image-source
。
您的请求不是很清楚,但我假设您希望将四个元素的端点指向网格的中心。在这种情况下,我必须单独设置四个元素中每个元素的背景和边框的渐变,以沿所需的方向辐射。
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
padding: 20px;
box-sizing: border-box;
width: 500px;
height: 300px;
background-image: url(https://i.stack.imgur.com/QYZq3.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.grid div {
background-color: rgba(255, 255, 255, 0.1); /* if linear-gradient() not working on browser */
border-width: 1px;
border-style: solid;
border-image-slice: 1;
height: 100%;
width: 100%;
}
.grid div:nth-child(1) {
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
border-top-width: 0;
border-left-width: 0;
border-image-source: linear-gradient(to bottom right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(2) {
background: linear-gradient(to bottom left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
border-top-width: 0;
border-right-width: 0;
border-image-source: linear-gradient(to bottom left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(3) {
background: linear-gradient(to top right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
border-bottom-width: 0;
border-left-width: 0;
border-image-source: linear-gradient(to top right, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
.grid div:nth-child(4) {
background: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.4) 100%);
border-bottom-width: 0;
border-right-width: 0;
border-image-source: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 50%, rgba(255, 255, 255, 0.8) 100%);
}
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
您必须稍微调整一下设置才能获得您想要的效果,但这里有一个使用图像蒙版的示例。我使用遮罩是因为它还可以覆盖组件上的边框。然而,我无法让它考虑到盒子阴影,并且透明度也会影响卡片中的任何内容。为了避免这种情况,您需要将两个元素分层。
另一种方法是对卡片背景使用透明渐变并完全忘记遮罩,但这样不会使边框褪色。我只看到第一个盒子上有边框,而没有看到其他盒子,所以不完全确定你想要什么。完全如图所示吗?您可能需要单独调整 4 个框中的每一个,并且可能需要将多个元素包装在一起以获得准确的外观。
body{
background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E);
}
.card{
width:200px;height:200px;
background: linear-gradient(135deg, rgba(53,56,57,1) 0%, rgba(53,56,57,1) 100%);
border:2px solid #888;
-webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 1));
-webkit-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);
-moz-box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);
box-shadow: 0px 0px 24px 3px rgba(0,0,0,0.65);
}
<div class="card">
</div>