css hover水滴涟漪效果
程序员文章站
2022-03-31 19:09:30
...
实现逻辑
1 . 给盒子添加遮罩层 , 初始大小为0 , hover效果放大
2 . 判断鼠标进入位置 , 上下左右四个方向
3 . 拿到鼠标在盒子内的 X/Y 坐标位置 , e.pageY - $(this).offset().top
4 . 鼠标进入动画 : 把鼠标的X/Y轴坐标 , 添加给遮罩层 , 作为定位的left和top , 并添加放大动画
5 . 鼠标移除动画 : 判断出去的位置 , 给遮罩层添加left和top , 并添加缩小动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
ul {
width: 1400px;
list-style: none;
display: flex;
justify-content: space-between;
padding: 100px;
margin: 0 auto;
}
li {
width: 23%;
height: 400px;
background: rgb(98, 190, 190, .5);
position: relative;
overflow: hidden;
transition: all 1s;
overflow: hidden;
}
li:hover {
box-shadow: 0 0 5px rgba(98, 190, 190, .5),
0 0 25px rgba(98, 190, 190, .5),
0 0 50px rgba(98, 190, 190, .5),
0 0 200px rgba(98, 190, 190, .5);
border-radius: 5px;
}
.ripple {
display: block;
position: absolute;
border-radius: 100%;
transform: scale(0);
background: rgba(28, 198, 122, .3);
transform: translate(-50%, -50%);
width: 150px;
height: 150px;
opacity: 0;
}
@keyframes ripple {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(0);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(10);
}
}
@keyframes ripplehide {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(10);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(0);
}
}
.ani {
animation: ripple 0.8s ease-in;
animation-fill-mode: forwards;
}
.anihide {
animation: ripplehide 0.8s ease-in;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<ul>
<li>
<div class="ripple"></div>
</li>
<li>
<div class="ripple"></div>
</li>
<li>
<div class="ripple"></div>
</li>
<li>
<div class="ripple"></div>
</li>
</ul>
</body>
<script src="./js/jquery-3.1.1.min.js"></script>
<script>
// 鼠标移入事件
$('ul li').mouseenter(function (e) {
$(this).find('.ripple').removeClass('anihide').addClass('ani')
$(this).find('.ripple').css({
top: e.offsetY + 'px',
left: e.offsetX + 'px',
})
})
$('ul li').mouseleave(function (e) {
// 获取li的宽高
var w = $(this).outerWidth()
var h = $(this).outerHeight()
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
// 判断出去的位置 //上右下左 0 1 2 3
// Math.atan2(y, x) x轴的角度
// 弧度 = 角度 * Math.PI / 180
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
// 鼠标在文档出去的位置 = 鼠标距离文档的位置 - 元素距离文档的位置
var t = e.pageY - $(this).offset().top
var l = e.pageX - $(this).offset().left
switch (direction) {
case 0:
$(this).find('.ripple').css({
top: 0,
left: l
})
console.log(l);
$(this).find('.ripple').removeClass('ani').addClass('anihide')
break;
case 1:
$(this).find('.ripple').css({
top: t,
left: $(this).outerWidth()
})
$(this).find('.ripple').removeClass('ani').addClass('anihide')
break;
case 2:
$(this).find('.ripple').css({
top: $(this).outerHeight(),
left: l
})
console.log(l, t);
$(this).find('.ripple').removeClass('ani').addClass('anihide')
break;
case 3:
$(this).find('.ripple').css({
top: t,
left: 0
})
$(this).find('.ripple').removeClass('ani').addClass('anihide')
break;
default:
break;
}
})
</script>
</html>
上一篇： tomcat启动窗口最小化设置
下一篇： 编译原理最小化