为了账号安全,请及时绑定邮箱和手机立即绑定

CSS 混合混合模式 + JS

CSS 混合混合模式 + JS

暮色呼如 2023-12-19 20:39:36
所以我有一个自定义的 js 光标(它跟随鼠标光标有延迟),其背景颜色为 #000,混合混合模式设置为差异。我的身体背景颜色和文本设置为#fff。现在,我有一个带有文本“HELLO”的 p 标签。我希望仅显示“H”一词和“O”,所以我创建了一个颜色设置为#000的跨度。当我将鼠标悬停在 P 标签上时,由于混合混合模式,我可以看到“ELL”我想要的词,但是“H”这个词和“O”得到”看不见”。当光标移到它上面时如何使它们可见? (如果光标没有覆盖整个单词,则只是光标悬停的每个单词的一部分,而不是整个单词)有什么解决办法吗?我尝试改变“H”的颜色和“O”在 mouseenter/mouseleave 上,但它没有按预期工作。const cursor = document.querySelector('.cursor')const wuc = document.querySelectorAll('.wuc')document.addEventListener('mousemove', e => {    cursor.setAttribute('style', 'top: ' + e.clientY+'px; left: '+e.clientX+'px;')})wuc.forEach((wuc) => {    wuc.addEventListener('mouseenter', () => {        wuc.style.color = '#fff'    })    wuc.addEventListener('mouseleave', () => {        wuc.style.color = '#000'    })})body {    background-color: #fff;    color: #fff;}.cursor {    width: 5vw;    height: 5vw;    transform: translate(-2.5vw, -2.5vw);    position: fixed;    transition-duration: 200ms;    transition-timing-function: ease-out;    background-color: #000;    border-radius: 50%;    mix-blend-mode: difference;}p {    margin-left: 30vw;    margin-top: 40vh;}.wuc {    color: #000;} <div class="cursor"></div>    <p class="container">       <span class="wuc">H</span>ELL<span class="wuc">O</span>    </p>
查看完整描述

1 回答

?
倚天杖

TA贡献1828条经验 获得超3个赞

我将使用与自定义光标相同位置的 radial-gradient 为文本着色


const cursor = document.querySelector('.cursor')

document.addEventListener('mousemove', e => {

  cursor.setAttribute('style', 'top: ' + e.clientY + 'px; left: ' + e.clientX + 'px;');

  document.body.setAttribute('style', '--x: ' + e.clientX + 'px;--y:' + e.clientY + 'px;');

})

body {

  background-color: #fff;

  color: #fff;

}


.cursor {

  width: 5vw;

  height: 5vw;

  transform: translate(-2.5vw, -2.5vw);

  position: fixed;

  transition-duration: 200ms;

  transition-timing-function: ease-out;

  background-color: #000;

  border-radius: 50%;

  mix-blend-mode: difference;

}


p {

  margin-left: 30vw;

  margin-top: 40vh;

}


.wuc {

  background: 

    radial-gradient(farthest-side, #fff 99.5%, #000 100%) calc(var(--x,0px) - 2.5vw) calc(var(--y,0px) - 2.5vw)/5vw 5vw fixed no-repeat,

    #000;

  -webkit-background-clip:text;

  background-clip:text;

  -webkit-text-fill-color: transparent;

  color:transparent;

  

}

<div class="cursor"></div>

<p class="container">

  <span class="wuc">H</span>ELL<span class="wuc">O</span>

</p>


查看完整回答
反对 回复 2023-12-19
  • 1 回答
  • 0 关注
  • 90 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信