Эффект наведения на границу круга

ProgramBox

Эффект наведения на границу круга

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#css #sass #effect

Вопрос:

может кто-нибудь помочь мне сделать этот эффект наведения

это обычный круг
и когда я проезжаю над ним, мне бы хотелось, чтобы он выглядел именно так и даже чтобы круг вращался

Заранее спасибо

1. Пожалуйста, добавьте любой код, который вы пытались сделать, чтобы это сработало в вашем вопросе.

2. Я начинаю с css, я мало что знаю, поэтому прошу помощи, извините:/ и это изображение

3. Появляются ли пробелы только при наведении курсора пользователя (т. Е. «Нормальный» круг, о котором вы упоминаете, является полным зеленым кругом?)

4. inicialmente es un circulo normal

Ответ №1:

Если я вас правильно понимаю, вот один из способов, которым вы могли бы это сделать.

В этом есть 3 элемента: изображение, круг и пробел.

Круг представляет собой div с радиусом границы, чтобы закруглить его, и границей с цветом по вашему выбору.
Зазор-это div, который равен полной высоте обертки и ширине предполагаемого зазора. Div присваивается тот же цвет, что и фон (в данном случае белый — измените его на любой, какой вы хотите). Затем мы применяем преобразование-30 градусов, чтобы получить угол в вашем примере.
Изображение представляет собой div с радиусом границы и расположено в середине оболочки.

Затем css использует ключевые кадры для добавления анимации в разделитель пробелов, чтобы заставить его вращаться при наведении курсора мыши на оболочку. Это создает иллюзию вращения круга.

 .wrapper {
  position: relative;
  height: 350px;
  width: 350px;
}

.wrapper .circle {
  position: absolute;
  height: 340px;
  width: 340px;
  border: 5px solid #00C17F;
  border-radius: 50%;
}

.wrapper .gap {
  position: absolute;
  width: 100px;
  height: 350px;
  left: 125px;
  background: white;
  -ms-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.wrapper:hover .gap {
  display: block;
  -webkit-animation: rotateCircle 20s linear infinite;
  -moz-animation: rotateCircle 20s linear infinite;
  -ms-animation: rotateCircle 20s linear infinite;
  -o-animation: rotateCircle 20s linear infinite;
  animation: rotateCircle 20s linear infinite;
}

.wrapper .image {
  position: absolute;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/f/f2/Light_Work_(Unsplash).jpg");
  background-size: cover;
  background-position: right;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
}

@keyframes rotateCircle {
  from {
    -ms-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
  }

  to {
    -ms-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -webkit-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg);
  }
}

 <div class="wrapper">
  <div class="circle"></div>
  <div class="gap"></div>
  <div class="image"></div>
</div>

Ответ №2:

У вас может быть только один HTML-элемент. Но вам нужно 3 слоя:

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

Слой 3 также можно заставить вращаться при наведении.

CSS позволяет прикреплять псевдоэлементы до и после к таким элементам, как divs (но не к обычным элементам img, поэтому мы используем div).

Таким образом, у нас есть наши 3 слоя. Мы используем сам div для отображения зеленого круга, а над ним (в терминах z-индекса) помещаем псевдоэлемент, который создает пробелы, используя фоновое изображение с коническим градиентом. Это появляется только тогда, когда пользователь наводит курсор. Другой псевдоэлемент содержит изображение с установленным индексом z, поэтому оно находится выше остальных и не подвержено влиянию вращающегося конического градиента.

Обратите внимание, что все используемые здесь единицы измерения относительны, поэтому код реагирует.

 .circle {
  --gap: 30deg; /* set this to what you want the gap to be */
  --border: 2px; /* set this to what you want the width of the green in the border to be can be in vmin for example for full responsiveness */
  position: relative;
  border: solid green var(--border);
  border-radius: 50%;
  width: 50vmin;
  height: 50vmin;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.circle::before, .circle::after {
  content: '';
  border-radius: 50%;
  position: absolute;
  margin: 0;
  padding: 0;
}
.circle::after {
  /* position and center the image */
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 70%;
  height: 70%;
  background-image: url(https://picsum.photos/id/0/400/400);
  background-size: cover;
  border-radius: 50%;
  border-style: solid;
  z-index: 2; 
}
.circle:hover::before {
  width: calc(100%   (3 * var(--border)));/* make it slightly bigger to make sure a 'stray' screen pixel does not get left out when the system converts part CSS px to screen pixels */
  height: calc(100%   (3 * var(--border)));
  top: calc(-1.5 * var(--border));
  left: calc(-1.5 * var(--border));
  z-index: 1;
  background-image: conic-gradient(white 0deg, white var(--gap), transparent var(--gap), transparent 180deg, white 180deg, white calc(180deg   var(--gap)), transparent calc(180deg   var(--gap)), transparent 360deg);
  animation: rotate 2s infinite linear;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

 <div class="circle"></div>

Метки: Эффект наведения на границу круга