這是一個幫助您入門的簡單範例。
「鏡頭」中的文字位於主要文字頂部的元素中。每次滑鼠移動時，它都會在滑鼠位置處被剪成一個圓圈。它的背景是白色的，所以看起來好像覆蓋了下面的文字。
<style> .about { position: relative; --x: -0; --y: -0; font-size: 48px; } .overlay { position: absolute; background: white; top: 0; left: 0; z-index: 1; clip-path: circle(1em at var(--x) var(--y)); color: red; } </style> <div class="about"> <div class="underneath">This is some text <br>and some more</div> <div class="overlay">Different characters<br>and again more</div> </div> <script> const about = document.querySelector('.about'); about.addEventListener('mousemove', function() { const x = event.clientX; const y = event.clientY; about.style.setProperty('--x', x + 'px'); about.style.setProperty('--y', y + 'px'); }); </script>
這是一個幫助您入門的簡單範例。
「鏡頭」中的文字位於主要文字頂部的元素中。每次滑鼠移動時，它都會在滑鼠位置處被剪成一個圓圈。它的背景是白色的，所以看起來好像覆蓋了下面的文字。
<style> .about { position: relative; --x: -0; --y: -0; font-size: 48px; } .overlay { position: absolute; background: white; top: 0; left: 0; z-index: 1; clip-path: circle(1em at var(--x) var(--y)); color: red; } </style> <div class="about"> <div class="underneath">This is some text <br>and some more</div> <div class="overlay">Different characters<br>and again more</div> </div> <script> const about = document.querySelector('.about'); about.addEventListener('mousemove', function() { const x = event.clientX; const y = event.clientY; about.style.setProperty('--x', x + 'px'); about.style.setProperty('--y', y + 'px'); }); </script>