#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>
Комментарии:
1. Вау, это здорово
Ответ №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>