我希望能得到关于显示一个文本的帮助,当鼠标经过时,它会隐藏在另一个文本后面,并在圆圈中跟随鼠标。我找到了一种使用mix-blend-mode和CSS遮罩的解决方案,但是这个解决方案会让两个文本根据所选颜色都出现在圆圈中(如下图黑色和紫色),而我只想显示紫色文本在圆圈中。我考虑使用clip,但无法摆脱它。你们有什么想法吗?
感谢您提前的帮助!
感谢您提前的帮助!
jQuery(document).ready(function($) {
var timer;
var mouseX = 0, mouseY = 0;
var xp = 0, yp =0;
var circle = $("#circle");
function mouseStopped(){
circle.removeClass('moving');
}
$(document).mousemove(function(e){
circle.addClass('moving');
mouseX = e.pageX - 160;
mouseY = e.pageY - 160;
clearTimeout(timer);
timer=setTimeout(mouseStopped,3000);
});
var loop = setInterval(function(){
xp += ((mouseX - xp)/12);
yp += ((mouseY - yp)/12);
circle.css({left: xp +'px', top: yp +'px'}); //
}, 30);
});
body, html {
position: relative;
overflow : hidden;
height: 100%;
width : 100%;
margin: 0;}
.pro {
color: #000;
}
.perso {
color: #6230e1;
}
.full-size {
height : 100%;
width : 100%;
position: absolute;
top : 0;
left : 0;
}
.blend-darken {
mix-blend-mode : darken;
}
.blend-screen {
mix-blend-mode : screen;
}
.mask-bg-color {
background-color: #fff;
}
.animated-bg {
background-color: black;
}
.element-mask {
background-color: #fff;
}
.circle-follow {
position :absolute;
overflow : hidden;
background-color: #000000;
width :320px;
height: 320px;
top:calc( 50% - 160px);
left:calc( 50% - 160px);
-webkit-border-radius: 160px;
border-radius: 160px;
-webkit-transition: opacity 0.9s cubic-bezier(0.52, 0.01, 0.16, 1);
transition: opacity 0.3s cubic-bezier(0.52, 0.01, 0.16, 1);
opacity : 0;
}
.circle-follow.moving {
opacity : 1;
}
/* hack to detect ie11 and above - blend mode not supported */
_:-ms-fullscreen, :root .letter-mask {background-color: transparent; }
_:-ms-fullscreen, :root .animated-bg {opacity: 0.2;}
_:-ms-fullscreen, :root .circle-follow {background-color:#ffffff; opacity: 0.2; }
<html>
<head>
<link type="text/css" rel="stylesheet" href="about.css">
</head>
<body>
<div class="wrapper full-size">
<!-- This div handle the background color and texte-->
<div class="mask-bg-color full-size">
<h1 class="pro">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h>
</div>
<!-- This div wrap all other elements with blend-mode darken apply -->
<div class="blend-darken full-size">
<!-- This div handle the background element-->
<div class="animated-bg full-size">
<h1 class="perso">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </h1>
</div>
<!-- This div wrap the masked element with blend-mode screen apply and background-color set as #ffffff = white background -->
<div class="blend-screen element-mask full-size">
<!-- This span display the masked element-->
<span id="circle" class="circle-follow">
</span>
</div>
</div>
</div>
<div class="notice">
<h1></h1>
</div>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="circle.js"></script>
</body>