按钮点击波浪效果

最新推荐文章于 2023-05-12 12:52:13 发布

CN-cheng

最新推荐文章于 2023-05-12 12:52:13 发布

阅读量2.9k

点赞数

分类专栏：小效果文章标签：按钮 css html 按钮波浪波浪按钮

本文链接：https://blog.csdn.net/github_37125043/article/details/72820026

版权

小效果专栏收录该内容

14 篇文章 0 订阅

订阅专栏

看到手机app的点击波浪效果感觉挺不错的，自己用js+css写了下这种效果：

文章目录

@[toc]
效果
CSS
HTML：
JS：
全部代码：

效果

点击右侧

点击右侧动画
点击的动画
点击中间右侧

效果预览：效果预览

CSS

：

/*按钮样式*/
#btn{
    width: 200px;
    height: 35px;
    line-height: 35px;
    background-color: #00BB9E;
    color: white;
    outline: none;
    box-shadow: none;
    border: none;
    overflow: hidden;
    position: relative;
}
/*波浪样式*/
.wave{
   position: absolute;
   width: 10px;
   height: 10px;
   transition: all .6s ease-in-out;
   background-color: white;
   opacity: .2;
   border-radius: 9999px;
}

HTML：

<button id="btn">确定 </button>

JS：

	   
//可以执行一次点击效果
//可以执行一次点击效果
var oneClick = true;
document.getElementById("btn").addEventListener('click',function(e){
    //判断是否可以执行一次点击效果
    // --因为执行波浪效果需要时间，一次波浪结束之后允许执行下一次点击
    if (oneClick){
        this.innerHTML += "<div class='wave'></div>";
        //获取点击时的坐标
        var event = e || window.event;
        var x = event.clientX;
        var y = event.clientY;
        //获取按钮的坐标
        var moveX = this.offsetLeft;
        var moveY = this.offsetTop;
        //获取按钮宽度
        var btnWidth = this.clientWidth;
        //设置点击后波浪样式
        var waveDiv = document.querySelector("#btn .wave");
        waveDiv.style.borderRadius = 0;
        waveDiv.style.width = parseInt(btnWidth)*2+'px';
        waveDiv.style.left = x-moveX-5+'px';
        waveDiv.style.marginLeft = -btnWidth+'px';
        waveDiv.style.height = parseInt(btnWidth)*2+'px';
        waveDiv.style.top = y-moveY-5+'px';
        waveDiv.style.marginTop = -btnWidth+'px';
        //定时删除波浪
        setTimeout(function(){
            waveDiv.remove();
            oneClick = true;
        },600);
        //不可以执行一次点击效果
        oneClick = false;
    }else {
        return false;
    }
})

全部代码：

<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <title>按钮点击波浪效果</title>
    <style>
        /*按钮样式*/
        #btn{
            width: 200px;
            height: 35px;
            line-height: 35px;
            background-color: #00BB9E;
            color: white;
            outline: none;
            box-shadow: none;
            border: none;
            overflow: hidden;
            position: relative;
        }
        /*波浪样式*/
        .wave{
		   position: absolute;
		   width: 10px;
		   height: 10px;
		   transition: all .6s ease-in-out;
		   background-color: white;
		   opacity: .2;
		   border-radius: 9999px;
		}
    </style>
</head>
<body>
    <button id="btn">确定 </button>
    <script>
        //可以执行一次点击效果
	   var oneClick = true;
	    document.getElementById("btn").addEventListener('click',function(e){
	        //判断是否可以执行一次点击效果
	        // --因为执行波浪效果需要时间，一次波浪结束之后允许执行下一次点击
	        if (oneClick){
	            this.innerHTML += "<div class='wave'></div>";
	            //获取点击时的坐标
	            var event = e || window.event;
	            var x = event.clientX;
	            var y = event.clientY;
	            //获取按钮的坐标
	            var moveX = this.offsetLeft;
	            var moveY = this.offsetTop;
	            //获取按钮宽度
	            var btnWidth = this.clientWidth;
	            //设置点击后波浪样式
	            var waveDiv = document.querySelector("#btn .wave");
	            waveDiv.style.borderRadius = 0;
	            waveDiv.style.width = parseInt(btnWidth)*2+'px';
	            waveDiv.style.left = x-moveX-5+'px';
	            waveDiv.style.marginLeft = -btnWidth+'px';
	            waveDiv.style.height = parseInt(btnWidth)*2+'px';
	            waveDiv.style.top = y-moveY-5+'px';
	            waveDiv.style.marginTop = -btnWidth+'px';
	            //定时删除波浪
	            setTimeout(function(){
	                waveDiv.remove();
	                oneClick = true;
	            },600);
	            //不可以执行一次点击效果
	            oneClick = false;
	        }else {
	            return false;
	        }
	    })
    </script>
</body>
</html>