前端新手项目练习50projects50days——按钮波纹特效
2021-11-25 本文已影响0人
简单一点点
本项目实现一个点击按钮产生波纹的简单而又酷炫效果。
button-ripple-effect.png
html部分就是一个按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符编码 -->
<meta charset="UTF-8" />
<!-- 虚拟窗口设置，宽度为设备宽度，缩放比例为1.0-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入css -->
<link rel="stylesheet" href="style.css" />
<!-- 标题 -->
<title>Button Ripple Effect</title>
</head>
<body>
<!-- 按钮 -->
<button class="ripple">Click Me</button>
<!-- 引入js -->
<script src="script.js"></script>
</body>
</html>
js 部分是为按钮添加一个点击事件，当用户点击按钮时在页面点击位置新加入一个类名为 circle 的 span 元素，在500毫秒后会将元素移除。
const buttons = document.querySelectorAll('.ripple')
buttons.forEach(button => {
// 按钮监听点击事件
button.addEventListener('click', function(e) {
// 鼠标点击位置
const x = e.clientX
const y = e.clientY
// 按钮位置
const buttonTop = e.target.offsetTop
const buttonLeft = e.target.offseteLeft
const xInside = x - buttonLeft
const yInside = y - buttonTop
// 在DOM中新添加一个元素 circle
const circle = document.createElement('span')
circle.classList.add('circle')
circle.style.Top = yInside + 'px'
circle.style.left = xInside + 'px'
this.appendChild(circle)
// 500ms后移除
setTimeout(() => circle.remove(), 500)
})
})
CSS 部分主要是关注在 circle 类上添加的转换和动画，transform: translate(-50%, -50%) scale(0);让圆心位于点击位置，并且初始大小为0。 然后通过 scale 动画将大小变为3倍，并将不透明度变为0，从而实现了波纹的效果。
* {
box-sizing: border-box;
}
body {
background-color: #000;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
button {
background-color: purple;
color:#fff;
border: 1px purple solid;
font-size: 14px;
text-transform: uppercase; /* 转换文本为大写字母 */
letter-spacing: 2px; /* 字母间距 */
padding: 20px 30px;
overflow: hidden;
margin: 10px 0;
position: relative;
}
button:focus {
outline: none;
}
button .circle {
position: absolute;
background-color: #fff;
width: 100px;
height: 100px;
border-radius: 50%; /* 圆角边框，50%为圆形 */
transform: translate(-50%, -50%) scale(0); /* 转换 */
animation: scale 0.5s ease-out; /* 动画 */
}
@keyframes scale { /* 自定义动画 */
to {
transform: translate(-50%, -50%) scale(3);
opacity: 0; /* 不透明度为0 */
}
}
button-ripple-effect.gif
