我想創建以下效果：
有兩個全屏影像重疊在一起，但只有一個可見。當您移動滑鼠時，第二個滑鼠會顯示在滑鼠所在的圓圈內。
我知道如何使用 JS 創建跟隨滑鼠的圓圈。至于影像疊加層，我很難過。我擺弄了偽元素、剪輯路徑和不透明度、徑向漸變、多個背景——但無濟于事。
徑向漸變在這里實際上是理想的，但據我所知，它只接受顏色，而不接受影像。
也許是第三個覆寫層？有任何想法嗎？（如果已經有一個 CodePen 可以做到這一點并且我錯過了，請鏈接到它）。
謝謝大家！
uj5u.com熱心網友回復：
我background在 a<div>中使用了屬性而不是使用<img>標簽......
訣竅是當你使用background-attachment: fixed;
在這個例子中，我使用了 2 個來自Windows 11 作業系統的背景，你可以看到真正的訣竅！一暗一亮……
let circle = document.getElementById('circle');
// on mouse move move the circle
document.addEventListener('mousemove', (e) => {
// make the image move relative to the mouse (make sure that in css you applied position: relative; to the div)
circle.style.left = e.pageX - 100 'px'; // 100 is half height of circle, so the cursor is in the middle
circle.style.top = e.pageY - 100 'px';
});body {
margin: 0;
overflow: hidden;
}
#bg-image {
position: fixed;
height: 100vh;
width: 100vw;
/*make the background responsive*/
object-fit: cover;
/* under the circle div*/
z-index: -1;
}
#circle {
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
/* change the url with the link of image you want */
background-image: url(https://laaouatni.github.io/w11-clone/images/0light.jpg);
/*making the background responsive*/
background-size: cover;
/*center the background */
background-position: center;
background-repeat: no-repeat;
/* the MAGIC is HERE in the next property */
background-attachment: fixed;
}<!-- the main default image -->
<img id="bg-image" src=" https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt=" ">
<!-- the other -->
<div id="circle"></div>uj5u.com熱心網友回復：
您可以在 CSS 中使用徑向漸變作為蒙版。
這個片段有一個“underneath”元素，它實際上位于 body 元素的背景之上。
蒙版影像除了不透明部分下方的背景部分外，其余部分都被剪掉了。
顯然，您需要更改尺寸以適合您的用例。
此外，mousemove 確實如此（例如，不查看是否為 mousedown）只是為了提供一個簡單的演示。
請注意，某些瀏覽器仍需要 -webkit- 前綴作為掩碼。
<!doctype html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1016/1024/768);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
.underneath {
position: absolute;
width: 100%;
height: 100%;
--x: 50vw;
--y: 50vh;
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
background-position: center;
-webkit-mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
-webkit-mask-size: 30vmin 30vmin;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
mask-size: 30vmin 30vmin;
mask-repeat: no-repeat;
mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
}
</style>
</head>
<body>
<div class="underneath"></div>
<script>
const underneath = document.querySelector('.underneath');
document.body.addEventListener('mousemove', function() {
underneath.style.setProperty('--x', event.clientX 'px');
underneath.style.setProperty('--y', event.clientY 'px');
});
</script>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/408397.html
標籤：
上一篇：懸停時移動邊框（CSS）