Как сделать анимацию этих кругов, чтобы от ширины кнопки расширялись до размеров на картинке?
1 ответ
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
div {
position: relative;
width: min(calc(9vw + 9vh), 130px);
height: min(calc(9vw + 9vh), 130px);
display: flex;
align-items: center;
justify-content: center;
}
div::after,
div::before {
content: '';
position: absolute;
width: inherit;
height: inherit;
border: 1px solid rgba(0,0,0, 0.4);
border-radius: 50%;
animation: waves 2s both linear infinite;
}
div::after {
animation-delay: 1s;
}
button {
width: inherit;
height: inherit;
border-radius: 50%;
background: black;
color: white;
border: none;
outline: none;
cursor: pointer;
transition: 0.2s;
z-index: 1;
}
button:active {
transform: scale(0.9);
}
div:hover::after,
div:hover::before {
display: none;
}
@keyframes waves {
from {
transform: scale(0.9);
opacity: 0;
}
40% {
opacity: 0.8;
}
to {
opacity: 0;
transform: scale(2.5);
}
}
<div>
<button>Hypno Button</button>
</div>
-
-
@Qwertiy в смысле?– user35528620 мая 2020 в 9:23
-
Пикселизация очень заметна... Была... Сейчас намного лучше, хотя в ответе ничего не менялось. Может хром глючит?– Qwertiy ♦20 мая 2020 в 9:25
-
Всё, я понял. Запусти сниппет, проскролль страницу так, чтобы он оказался вне видимой области, а потом обратно. Круги станут жирными и пикселизованными.– Qwertiy ♦20 мая 2020 в 9:29
-
@Qwertiy да. Почему?– user35528620 мая 2020 в 9:31