Укладка кругов создает черную полосу на границе радиуса - программирование
Подтвердить что ты не робот

Укладка кругов создает черную полосу на границе радиуса

У меня здесь довольно загадочное предприятие.

Я строю мышь, которая служит "фонариком/прожектором". Весь текст (встроенные элементы, кнопки, вы получаете точку) переворачивается с обычного белого на черный, если на нем происходит парение, нормальный фон - желтоватый оттенок.

В настоящее время у меня есть следующие настройки:

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>
4b9b3361

ОТВЕТЫ

Ответ 1

Я бы просто добавил еще один элемент выше, используя псевдоэлемент, чтобы скрыть эту маленькую границу и упростить код, перемещая контейнер вместо каждого элемента. Также нет необходимости в 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>

Ответ 2

Это может работать для ваших нужд.

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>

Ответ 3

попробуйте добавить

filter:blur(1.4px);/* or anywhere between 0.7px to 1.9px */

на внешний круг или внутренние круги. в вашем CSS