水波按钮效果

秒速五厘米 2022-06-17 00:12 238阅读 0赞

分享一个在网页中常见的按钮效果：水波按钮。  
实现主要要掌握：  
（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();
                    });   //每次在执行完动画把“水波”从文档中移出；
    
                });
    
            });

感谢阅读

--------------------

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关按钮—冰冻效果

按钮—冰冻效果 ![在这里插入图片描述][20210418193719255.gif_pic_center] <!DOCTYPE html> <html

分手后的思念是犯贱/ 2023年01月13日 10:54/ 0 赞/ 124 阅读

相关按钮—边框效果

按钮—边框效果 ![在这里插入图片描述][2021041819343385.gif_pic_center] <!DOCTYPE html> <html

喜欢ヅ旅行/ 2023年01月13日 10:54/ 0 赞/ 170 阅读

相关【好看的按钮效果】

原文链接：[https://www.jq22.com/code948][https_www.jq22.com_code948] <div class="buttons

曾经终败给现在/ 2022年09月04日 08:59/ 0 赞/ 181 阅读

相关 css3 按钮翻转效果

css3 按钮翻转效果 ![css3 按钮翻转][css3] ![css3 按钮翻转][css3 1] ![css3 按钮翻转][css3 2] html

末蓝、/ 2022年09月03日 07:19/ 0 赞/ 260 阅读

相关网页按钮效果css3,css3按钮效果

/\ Box colors \/ .bg-1 \{ background:\ECEFF1; color:\37474f; \} /\ Common button st

た入场券/ 2022年09月02日 14:53/ 0 赞/ 245 阅读

相关 Android-按钮效果

按钮动作 XML <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro

深碍√TFBOYSˉ_/ 2022年07月26日 04:05/ 0 赞/ 205 阅读

相关 Unity Shader-后处理：屏幕水波效果

一.简介最近在打黑魂，被虐得死去活来，每次都是想砸电脑的节奏，然而还是忍不住想玩，唉。下面步入正题，黑魂的传送技能之前会播放一个帅帅的屏幕特效-屏幕水波，从屏

忘是亡心i/ 2022年07月15日 02:54/ 0 赞/ 328 阅读

相关水波按钮效果

分享一个在网页中常见的按钮效果：水波按钮。实现主要要掌握：（1）CSS3的动画：transform属性里的 scale(x,y) 2D缩放转换; （2）jQue

秒速五厘米/ 2022年06月17日 00:12/ 0 赞/ 239 阅读

相关按钮划过波浪效果

@-webkit-keyframes circleIn{ 0%{-webkit-transform:scale(0);opacity:0.4} 100%{-webkit

深碍√TFBOYSˉ_/ 2022年06月11日 01:38/ 0 赞/ 200 阅读

相关 js实现起伏的水波背景效果会员背景

<!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset

约定不等于承诺〃/ 2022年04月08日 13:15/ 0 赞/ 188 阅读