web前端开发

您现在的位置是:首页>前端开发

HTML

如何在单击按钮上创建波纹效果?

admin:杨小二时间:2020-07-09 19:18:54前端开发0次
波纹效应是现代设计趋势的一部分。您已经在许多网站上特别是使用Google的材料设计语言看到了它。它提供了按钮按下效果。我们可以通过向按钮添加子元素并设置动画效果来产生涟漪效果。我们也可以使用Javascript根据光标在按钮上的位置进行定位。

波纹效应是现代设计趋势的一部分。您已经在许多网站上特别是使用Google的材料设计语言看到了它。它提供了按钮按下效果。我们可以通过向按钮添加子元素并设置动画效果来产生涟漪效果。我们也可以使用Javascript根据光标在按钮上的位置进行定位。

基本样式:

1、使用position:relative属性向按钮添加基本样式,以放置内部span标签并overflow:hidden防止span超出按钮。

<!DOCTYPE html>

<html>

<head>

<title>

Button Ripple Effect - GFG

</title>

<style>

/* Adding styles to button */

.btn {

padding: 12px 50px;

border: none;

border-radius: 5px;

background-color: #1abc9c;

color: #fff;

font-size: 18px;

outline: none;

cursor: pointer;

/* We need this to position

span inside button */

position: relative;

overflow: hidden;

box-shadow: 6px 7px 40px -4px 

rgba(0, 0, 0, 0.2);

}

</style>

</head>

<body>

<button class="btn">

Enter GeeksforGeeks

</button>

</body>

</html>

输出:

2、向span元素添加样式:现在为span元素添加样式,该样式将在单击按钮时显示。

<style>

.btn span {

position: absolute;

border-radius: 50%;

/* To make it round */

background-color: rgba(0, 0, 0, 0.3);

width: 100px;

height: 100px;

margin-top: -50px;

/* for positioning */

margin-left: -50px;

animation: ripple 1s;

opacity: 0;

}

/* Add animation */

@keyframes ripple {

from {

opacity: 1;

transform: scale(0);

}

to {

opacity: 0;

transform: scale(10);

}

}

</style>

3、添加JavaScript:现在,我们将在按钮单击上添加span元素,并根据鼠标单击的位置添加位置。

在按钮上单击,我们必须执行以下操作:

创建span元素并向其添加波纹类。 使用event变量获取光标的点击位置。 设置span元素的位置。 删除span元素以避免按钮中的span元素滥发。

<script>

const btn = document.querySelector(".btn");

    // Listen for click event

    btn.onclick = function (e) {

        // Create span element

        let ripple = document.createElement("span");

        // Add ripple class to span

        ripple.classList.add("ripple");

        // Add span to the button 

        this.appendChild(ripple);

        // Get position of X

        let x = e.clientX - e.target.offsetLeft;

        // Get position of Y 

        let y = e.clientY - e.target.offsetTop;

        // Position the span element

        ripple.style.left = `${x}px`;

        ripple.style.top = `${y}px`;

        // Remove span after 0.3s

        setTimeout(() => {

            ripple.remove();

        }, 300);

    };

</script>

最终输出如下所示:

平面设计