Пример:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<a class="circular" href="#"> <span></span> <p>Ссылка</p> </a> <div class="circular"> <span></span> <p>Блочный элемент</p> </div> <button class="circular"> <span></span> <p>Кнопка button</p> </button> |
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 |
.circular { position: relative; display: block; color: #fff; background: #337AB7; overflow: hidden; margin: 10px; border: none; padding: 0 30px; text-decoration: none; text-align: center; width: 100%; } .circular p { position: relative; z-index: 5; transition: color 0.6s; font-size: 24px; line-height: 50px; } .circular:hover p { color: #337AB7; } .circular span { border-radius: 100%; position: absolute; display: block; content: ""; z-index: 0; width: 0; height: 0; background: #fff; transform: translate(-50%, -50%); transition: width 0.6s, padding-top 0.6s; } .circular:hover span { width: 250%; padding-top: 250%; } |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const elements = document.querySelectorAll(".circular"); const elements_span = []; elements.forEach((element, index) => { if (!elements_span[index]) elements_span[index] = element.querySelector("span"); element.addEventListener("mouseover", e => { elements_span[index].style.left = e.pageX - element.getBoundingClientRect().left - window.scrollX + "px"; elements_span[index].style.top = e.pageY - element.getBoundingClientRect().top - window.scrollY + "px"; }); element.addEventListener("mouseout", e => { elements_span[index].style.left = e.pageX - element.getBoundingClientRect().left - window.scrollX + "px"; elements_span[index].style.top = e.pageY - element.getBoundingClientRect().top - window.scrollY + "px"; }); }) |
Добавить комментарий: