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

#javascript #html #css #css3 #css_animation

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

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

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



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;
}


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.


  

  

  



  
ja uh misschien werkt dit wel niet
    






Это почти приводит к желаемому результату, за исключением радиуса границы: 50% неправильно
обрабатывают semi-nice окружностей. Пиксельная драма! Изображение для уточнения:   



Вопрос: Как можно удалить черную рамку, созданную путем наложения этих двух элементов
с одинаковым размером при сохранении текущего эффекта на текст?

Свободный перевод вопроса Stacking circles produces a black bar on border radius
от участника  @roberrrt-s.   
    

Ответы

Ответ 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;
}


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.


  

  

  



  
ja uh misschien werkt dit wel niet





Вот еще одна идея с меньшим количеством кода и применением чистого JS без jQuery:   



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;
}
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.


  



  
ja uh misschien werkt dit wel niet





Вы  можете оптимизировать больше, если мы рассмотрим другой градиент, который заменит
тень и границу, которую мы использовали для удаления черной линии:  



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;
}
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.




  
ja uh misschien werkt dit wel niet





Safari не поддерживает синтаксис градиента, как подробно описано в этом вопросе,
поэтому здесь есть другая альтернатива:   



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;
}
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.




  
ja uh misschien werkt dit wel niet





Свободный перевод ответа Stacking circles produces a black bar on border radius от
участника  @Temani Afif.


Ответ 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;
}


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.


  

  

  

  



  
ja uh misschien werkt dit wel niet
    






Свободный перевод ответа Stacking circles produces a black bar on border radius от
участника  @Katy H..