堆叠圆圈在边界半径上产生黑条
Stacking circles produces a black bar on border radius
我这里有一个令人费解的企业。
我正在构建一个用作 'torch / searchlight' 的鼠标。如果悬停在上面，所有文本（内联元素、按钮，你懂的）都会从通常的白色反转为黑色，正常背景是黄色氛围。
我目前有以下设置：
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
clip-path: circle(50% at 50% 50%);
}
.b-cursor__front {
z-index: 106;
background: white;
clip-path: circle(50% at 50% 50%);
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
(codepen)
这几乎可以产生预期的结果，除了 border-radius: 50% 不能正确处理半漂亮的堆叠 div。像素剧！图片说明：
问题：如何在保留当前文本效果的同时去除通过堆叠这两个相同大小的元素而产生的黑色边框？
这可能会满足您的需要。
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html, body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p, span, a {
position: relative;
z-index: 105;
}
.b-cursor__shadow2, .b-cursor__back, .b-cursor__front, .b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 20px rgba(231, 232, 192, 1);
z-index: 107;
height: 8rem;
width: 8rem;
}
.b-cursor__shadow2 {
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
z-index: 109;
height: 8rem;
width: 8rem;
background-color: transparent;
}
/* background changes */
.b-cursor__back {
z-index: 104;
height: 8rem;
width: 8rem;
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
background-size: 100% 100%;
background-position: 50% 50%;
}
.b-cursor__back:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #18173e;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
.b-cursor__front {
z-index: 106;
height: 8rem;
width: 8rem;
background: white;
background: radial-gradient(circle at center, #ffffff 100%, #ffffff 25%);
background-position: 50% 50%;
mix-blend-mode: difference;
}
.b-cursor__front:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #ffffff;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae
ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales
lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="cursor_now"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
我会简单地在上面添加另一个元素，使用伪元素来隐藏那个小边框，并通过移动容器而不是每个元素来简化代码。也不需要 clip-path
const _$cursor = $('.b-cursor');
$(document).on('mousemove', (e) => {
_$cursor.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before {
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
/**/
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
}
.b-cursor__front {
z-index: 106;
background: white;
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="b-cursor__shadow"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
这是另一个没有 jQuery 的更少代码和纯 JS 的想法：
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before{
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
border-radius:50%;
z-index:998;
}
/**/
.b-cursor > div {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 997;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
如果我们考虑用另一种渐变代替我们用来修复黑色的阴影和边框，您仍然可以优化更多：
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
Safari 不支持 at 的渐变语法，详见 ，因此这是另一种选择：
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat;
}
.test {
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
尝试添加
filter:blur(1.4px); /* or anywhere between 0.7px to 1.9px */
到外圈或内圈。在你的 CSS
我这里有一个令人费解的企业。
我正在构建一个用作 'torch / searchlight' 的鼠标。如果悬停在上面，所有文本（内联元素、按钮，你懂的）都会从通常的白色反转为黑色，正常背景是黄色氛围。
我目前有以下设置：
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
clip-path: circle(50% at 50% 50%);
}
.b-cursor__front {
z-index: 106;
background: white;
clip-path: circle(50% at 50% 50%);
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
(codepen)
这几乎可以产生预期的结果，除了 border-radius: 50% 不能正确处理半漂亮的堆叠 div。像素剧！图片说明：
问题：如何在保留当前文本效果的同时去除通过堆叠这两个相同大小的元素而产生的黑色边框？
这可能会满足您的需要。
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});
html, body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p, span, a {
position: relative;
z-index: 105;
}
.b-cursor__shadow2, .b-cursor__back, .b-cursor__front, .b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 20px rgba(231, 232, 192, 1);
z-index: 107;
height: 8rem;
width: 8rem;
}
.b-cursor__shadow2 {
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
z-index: 109;
height: 8rem;
width: 8rem;
background-color: transparent;
}
/* background changes */
.b-cursor__back {
z-index: 104;
height: 8rem;
width: 8rem;
background: radial-gradient(circle at center, #18173e 100%, #18173e 25%);
background-size: 100% 100%;
background-position: 50% 50%;
}
.b-cursor__back:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #18173e;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
.b-cursor__front {
z-index: 106;
height: 8rem;
width: 8rem;
background: white;
background: radial-gradient(circle at center, #ffffff 100%, #ffffff 25%);
background-position: 50% 50%;
mix-blend-mode: difference;
}
.b-cursor__front:after {
width: 7rem;
height: 7rem;
content: '';
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 0px 1rem #ffffff;
transition: all 0.3s linear;
mix-blend-mode: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae
ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales
lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="cursor_now"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>
我会简单地在上面添加另一个元素，使用伪元素来隐藏那个小边框，并通过移动容器而不是每个元素来简化代码。也不需要 clip-path
const _$cursor = $('.b-cursor');
$(document).on('mousemove', (e) => {
_$cursor.css({
left: e.pageX,
top: e.pageY
});
});
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative;
z-index: 105;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before {
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
/**/
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
}
.b-cursor__front {
z-index: 106;
background: white;
mix-blend-mode: difference;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
<div class="b-cursor__shadow"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
这是另一个没有 jQuery 的更少代码和纯 JS 的想法：
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
/*the magic element*/
.b-cursor:before{
content:"";
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
border:2px solid rgba(231, 232, 192, 1);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
border-radius:50%;
z-index:998;
}
/**/
.b-cursor > div {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 997;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
如果我们考虑用另一种渐变代替我们用来修复黑色的阴影和边框，您仍然可以优化更多：
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed;
}
.test {
background:
radial-gradient(circle at var(--x) var(--y),#18173e 4rem,transparent 4rem) fixed,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
Safari 不支持 at 的渐变语法，详见
document.onmousemove = function(e) {
document.body.style.setProperty('--mx',(e.pageX)+'px');
document.body.style.setProperty('--my',(e.pageY)+'px');
document.body.style.setProperty('--x',(e.clientX)+'px');
document.body.style.setProperty('--y',(e.clientY)+'px');
}
html {
background:red;
}
body{
padding: 1px;
margin: 0;
min-height:100vh;
cursor: none;
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat;
}
.test {
background:
radial-gradient(farthest-side ,#18173e 100%,transparent 100%)
calc(var(--x) - 4rem) calc(var(--y) - 4rem)/8rem 8rem fixed no-repeat,
darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
.b-cursor { /*no z-index here !!!*/
position: absolute;
width: 8rem;
height: 8rem;
top:var(--my);
left:var(--mx);
margin-left: -4rem;
margin-top: -4rem;
}
.b-cursor:before{
content:"";
position:absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
background:
radial-gradient(farthest-side,
transparent calc(100% - 18px),rgba(231, 232, 192, 1) calc(100% - 15px),
rgba(231, 232, 192, 1) calc(100% - 10px),transparent 100%);
border-radius:50%;
z-index:999;
}
.b-cursor:after {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius: 50%;
z-index: 998;
background: white;
mix-blend-mode: difference;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet</p>
</div>
尝试添加
filter:blur(1.4px); /* or anywhere between 0.7px to 1.9px */
到外圈或内圈。在你的 CSS