水波按钮效果

最新推荐文章于 2024-05-27 11:09:28 发布

NINE-NINE

最新推荐文章于 2024-05-27 11:09:28 发布

阅读量718

点赞数

分类专栏： javascript jquery HTML 前端小实例文章标签： css3 css jquery html javascript

本文链接：https://blog.csdn.net/m0_38099607/article/details/70049514

版权

HTML 同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

前端小实例

18 篇文章 4 订阅

订阅专栏

javascript

17 篇文章 1 订阅

订阅专栏

分享一个在网页中常见的按钮效果：水波按钮。
实现主要要掌握：
（1）CSS3的动画：transform属性里的 scale(x,y) 2D缩放转换;
（2）jQuery 事件 - pageX /pageY属性;（鼠标指针的位置，相对于文档的边缘。）
（3）jQuery CSS 操作 - offset() 方法；
（3）jQuery 文档操作 : append() 方法;
（4）animationend 事件（在 CSS 动画结束后为元素添加监听事件:）
附上源代码：
先是HTML部分：

<div href="#" class="btn">GOOGLE 按钮</div>

然后是CSS部分：

<style>
        body{ background: #000; }
        .btn{ width: 200px; height: 50px; line-height: 50px; background: #333; color: #fff; font-size: 16px; position: relative; text-align: center; overflow: hidden; }
        .box{ width: 4px; height: 4px; background: #fff; position: absolute;  border-radius: 50%; animation: mybtn 1s ; opacity: 0; transform:scale(100); }
        @keyframes mybtn{
            from{
                opacity: 0.5;
                transform:scale(0);
            }

            }
            to{
                opacity: 0;
                transform:scale(100);
            }
        }
    </style>

最后JS部分（记得先引入Jquery插件）：

$(function(){

            $('.btn').on('mousedown',function(e){
                var ball = $('<span class="box"></span>');
                var left=e.pageX-$('.btn').offset().left;
                var top=e.pageY-$('.btn').offset().top;

                ball.css({'left':left,'top':top});
                $('.btn').append( ball );
                ball.on('animationend',function(){
                    ball.remove();
                });   //每次在执行完动画把“水波”从文档中移出；

            });

        });