Эффект радиоволны на кнопке или блоке

Обратите внимание: Волна имеет максимальный диаметр 160vw, и соотв. может вызывать вертикальную и горизонтальную прокрутку страницы.

Пример:

Внимание!

HTML:

<div class="radiowave">
	<div class="btn-data">
		<div class="btn-text">Внимание!</div>
		<span class="wave"></span>
		<span class="wave"></span>
		<span class="wave"></span>
		<span class="wave"></span>
	</div>
</div>

<div class="btn-text">Внимание!</div>

</div>

CSS:

.radiowave {
	position: relative;
	display: inline-block;
	z-index: 1000;
}
.radiowave .btn-data {
    display: flex;
    align-items: center;
    justify-content: center;
	background: #337AB7;
	border: 12px solid #BFE2FF;
	border-radius: 50%;
	height: 140px;
	width: 140px;	
}
.radiowave .btn-text {
	font-family: 'Roboto', Tahoma, sans-serif;
	color: #FFF;
	font-size: 20px;	
}
.radiowave .wave {
	border-radius: 50%;
	border: 4px solid #BFE2FF;
	position: absolute;
	animation: radio 4s linear infinite;
	z-index: -1;
	pointer-events: none;
}
.radiowave .wave:nth-of-type(2) {
	animation-delay: 1s;
}
.radiowave .wave:nth-of-type(3) {
	animation-delay: 2s;
}
.radiowave .wave:nth-of-type(4) {
	animation-delay: 3s;
}
.radiowave:hover .wave {
	animation-play-state: paused;
}
@keyframes radio {
	0% {
		width: 0;
		height: 0;
	}
	30% { 
		opacity: 0.8;
	}
	80% { 
		opacity: 0.6;
	}
	100% {
		width: 160vw;
		height: 160vw;
		opacity: 0;
	}
}

.radiowave {

position: relative;

display: inline-block;

z-index: 1000;

}

.radiowave .btn-data {

display: flex;

align-items: center;

justify-content: center;

background: #337AB7;

border: 12px solid #BFE2FF;

border-radius: 50%;

height: 140px;

width: 140px;

}

.radiowave .btn-text {

font-family: 'Roboto', Tahoma, sans-serif;

color: #FFF;

font-size: 20px;

}

.radiowave .wave {

border-radius: 50%;

border: 4px solid #BFE2FF;

position: absolute;

animation: radio 4s linear infinite;

z-index: -1;

pointer-events: none;

}

.radiowave .wave:nth-of-type(2) {

animation-delay: 1s;

}

.radiowave .wave:nth-of-type(3) {

animation-delay: 2s;

}

.radiowave .wave:nth-of-type(4) {

animation-delay: 3s;

}

.radiowave:hover .wave {

animation-play-state: paused;

}

@keyframes radio {

0% {

width: 0;

height: 0;

}

30% {

opacity: 0.8;

}

80% {

opacity: 0.6;

}

100% {

width: 160vw;

height: 160vw;

opacity: 0;

}

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: