主页 / 问题 / 1121145
Accepted
YourDeveloper
Asked:2020-05-06 17:37:33 +0000 UTC2020-05-06 17:37:33 +0000 UTC

如何通过改变里面文字的颜色在文字上做出漂亮的悬停效果？

  • 772

我在网站 http://joxi.ru/E2pNyBPcaP5RQr看到了这个效果 ，就是当你将鼠标悬停在文字上时，会出现类似圆圈的东西，而圆圈内的文字颜色不同，我不太明白这是怎么可能的，因为圆圈应该与文字重叠，请解释如何做到这一点或是否有插件？

html

1 个回答

  1. Best Answer

    我的轻微kosyachnaya尝试-但含义应该很清楚

    （不知道如何将 svg-circle 放在光标下并隐藏它）

    let item = document.querySelector(".circle");

let x = svg.getBoundingClientRect().x;
let y = svg.getBoundingClientRect().y;



svg.onmousemove = function(e) {

  item.style.position = "absolute"
  item.style.left = e.x - 75 + "px";
  item.style.top = e.y - 75 + "px";
}
    .parent {
  position: relative;
  overflow: hidden;
}

.circle {
  width: 150px;
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: red;
  mix-blend-mode: exclusion;
}
    <div class="parent" id="svg">
  <div class="circle"></div>
  <svg viewBox="0 0 1000 350" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <style>
       
       .r{
         display: none;
       }
       
       text{
         font-size: 80px;
         font-family: sans-serif;
         font-weight: 900;
         text-transform: uppercase;
       }
       
     </style>
     
     <clipPath id="mask">
       <path d="M50,0 200,0 120,300z" fill="red"/>
       <rect x="120" y="150" width="200" height="80" fill="green"/>
       <circle cx="200" cy="120" r="80" fill="blue"/>
       
       
   <rect width="300" height="300" fill="url(#gr)" ry="150" class="r" ></rect>
     </clipPath>
     
   </defs>
  
   <g>
     <path d="M50,0 200,0 120,300z" fill="red"/>
     <rect x="120" y="150" width="200" height="80" fill="green"/>
     <circle cx="200" cy="120" r="80" fill="blue"/>
   </g>
  
  <text x="280" y="100" fill="#fff">blend mode</text>
  
   <circle r="100" fill="yellow" class="r" clip-path="url(#cp)" id="rect" />         
</svg>
</div>

    • 4

相关问题