css hover水滴涟漪效果

实现逻辑

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 / 180var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;// 鼠标在文档出去的位置 = 鼠标距离文档的位置 - 元素距离文档的位置var t = e.pageY - $(this).offset().topvar l = e.pageX - $(this).offset().leftswitch (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>

css hover水滴涟漪效果相关推荐

shader graph落在地面的水滴涟漪效果制作思路
(以下内容为不知什么地方看来的教学视频后的复盘整理笔记.) 0思路:在现有的材质上添加一个涟漪序列帧动画作为nomal输出,做出序列帧动画,控制大小,虚实让它看起来更自然 1:水面涟漪首先需要一个反射 ...
css hover遮罩层效果
运用css方法达到鼠标移入文字消失,图片占满,遮罩层展示. 用到了transition (过渡). position(定位).opacity(透明度)等效果图 html <div class= ...
使用 jquery 实现 css hover 长期维持效果
1.首先定义 hover 效果 .base-style:hover{color: red } 2.在上面的 hover 上添加一个样式一模一样的效果样式 .base-style-active, .ba ...
html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
CSS悬浮实现圆形涟漪（水滴涟漪）效果
实现思路: 一.代码结构: 1.iconfont图标外围父元素为span块(样式为inner-wrapper),父父元素为div(样式为middle-wrapper): 2.inner-wrapper ...
html按钮突出效果,这10个按钮，把 CSS HOVER 的创意发挥到极致了
这10个按钮,把 CSS HOVER 的创意发挥到极致了 7月 19, 2017 评论 Sponsor CSS hover 样式很简单,但是想创造出有意思.实用.有创意性的特效是很考验设计师的创意能力 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
html涟漪动画效果,CSS 在按钮上做个涟漪效果（Ripple Animation）
作为一个 CSS 渣,这次在看到一个 Vue 组件库的按钮里有个点按之后的效果之后跃跃欲试. 效果大概长这样: 首先先观察了一番,大概得到以下特征: 以鼠标按下的位置为原点,以某个值为半径进行扩散 ...
移动端css hover效果,css移动端:acitve效果的实现
做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有& ...

css hover水滴涟漪效果

css hover水滴涟漪效果相关推荐

最新文章

热门文章