国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用特殊光標更改懸停時的文本
P粉665427988
P粉665427988 2023-09-05 23:47:42
0
1
669
<p>請指導我如何更改懸停時的文本,類似于 monopo 網站。我不需要背景。只需簡單的圓形效果(如彩色背景)和文本更改即可。此外,如果可能的話,我希望該效果僅在名為“about”的 div 中激活。網站鏈接: https://monopo.london/</p>
P粉665427988
P粉665427988

全部回復(1)
P粉068174996

這是一個幫助您入門的簡單示例。

“鏡頭”中的文本位于主要文本頂部的元素中。每次鼠標移動時,它都會在鼠標位置處被剪成一個圓圈。它的背景是白色的,所以看起來好像覆蓋了下面的文本。

<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>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板