Обсудить проектЗаливка элемента от точки наведения курсора
В просторах интернета наткнулся на сайт, где реализован интересный и довольно простой эффект наведения на кнопку.
Живой пример:
Суть
- Наводим курсор на кнопку
- Высчитываем положение курсора относительно кнопки
- Исходя из координатов курсора перемещается элемент
- Видим эффект заполнения кнопки
HTML разметка
Я подключил библиотеку jquey, потому что мне так удобнее.
<a href="#" class="btn">
<i class="fa fa-fire-extinguisher" aria-hidden="true"></i>
<span class="btn_text">Наведите мышкой</span>
<span class="btn_hover"></span>
</a>
<a href="#" class="btn">
<i class="fa fa-check" aria-hidden="true"></i>
<span class="btn_text">В разные места</span>
<span class="btn_hover"></span>
</a>
<a href="#" class="btn">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<span class="btn_text">И еще разок</span>
<span class="btn_hover"></span>
</a>CSS
.btn
{
display: inline-block;
padding: 12px 55px;
font-size: 20px;
line-height: 1.42857143;
text-align: center;
color: #fff;
border-radius: 4px;
border: 2px solid rgb(255, 255, 255);
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn:hover .btn_hover
{
width: 1000px;
height: 1000px;
}
.btn .btn_hover
{
position: absolute;
z-index: -1;
width: 0;
height: 0;
border-radius: 50%;
background: #50e3c2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: width .6s, height .6s, background-color .4s;
}JavaScript
$(function(){
$(".btn").mouseover(function(e){
// положение элемента
var pos = $(this).offset();
var elem_left = pos.left;
var elem_top = pos.top;
// положение курсора внутри элемента
var Xinner = e.pageX - elem_left;
var Yinner = e.pageY - elem_top;
$(this).find(".btn_hover").css({
"left":Xinner,
"top":Yinner
})
});
});Вот и все. Ничего сложного.
Таким образом мы получили интересный и просто эффект наведения курсора на кнопку под средствами css3 и javascript.
закрыть