tgoop.com/webdevlair/3957
Create:
Last Update:
Last Update:
Создайте кнопку, при нажатии на которую появляется анимация "волн", расходящихся из точки клика.
Ожидаемое поведение:• При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение.• Анимация должна быть плавной и не мешать повторным кликам.
Решение задачи
<button class="ripple-button">Нажми меня</button>
.ripple-button {
position: relative;
overflow: hidden;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
}
.ripple-button .ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
background-color: rgba(255, 255, 255, 0.6);
}@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
document.querySelector('.ripple-button').addEventListener('click', function (event) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`;
ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`;
ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`;
ripple.className = 'ripple';
this.appendChild(ripple);
ripple.addEventListener('animationend', () => ripple.remove());
});