Обратите внимание: Волна имеет максимальный диаметр 160vw, и соотв. может вызывать вертикальную и горизонтальную прокрутку страницы.
Пример:
Внимание!
HTML:
|
1 2 3 4 5 6 7 8 9 |
<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> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
.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; } } |
Добавить комментарий: