Вашему вниманию красиво созданная анимация, которая создает волны от кнопки, что происходит при звонке на телефон, где используют чистый CSS и кнопки от Font Awesome. Безусловно вы могли на официальных сайтах встречать такой эффект, что теперь можете поставить на свой, где прикреплены CSS для полного редактирование, как по самой анамации и размеру фигуры.
Также нужно знать, что CSS keyframes позволяет воспроизводить различные корректировки для изменение, где идет в постоянном режиме, а также в автоматически. Теперь при помощи кейфреймов можно как вам нужно поменять CSS стили, которые идут для заданного селектора, которая производится в разнообразных точках в момент смены состояния или события.
HTML
Код
<div class="nekaluselan_umatganusin">
<i class="fas fa-phone"></i>
</div>
CSS
Код
.nekaluselan_umatganusin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 195px;
height: 195px;
background: #14bb0b;
border-radius: 100%;
}
.nekaluselan_umatganusin .fas{
color:white;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(90deg);
font-size:7em;
}
.nekaluselan_umatganusin:before,
.nekaluselan_umatganusin:after{
content:'';
display:block;
position:absolute;
border:50%;
border:1px solid #58ea00;
top:-20px;
left:-20px;
right:-20px;
bottom:-20px;
border-radius:50%;
animation:animtephone 1.5s linear infinite;
opacity:0;
}
.nekaluselan_umatganusin:after{
animation-delay:0.5s;
}
@keyframes animtephone{
0%{
transform:scale(0.5);
opacity:0;
}
50%{
opacity:1;
}
100%{
transform:scale(1.2);
opacity:0;
}
}
Чтоб появилась фигура, виде телефонной трубки, то на сайте нужно подключить шрифтовые кнопки Font Awesome.
Демонстрация
