当前位置:主页 > JavsScript库 > 动画 >

单击按钮时波纹效果
栏目分类:动画   发布日期:2021-09-23   浏览次数:

受材料设计启发的按钮波纹点击效果的微型 JavaScript 实现。

使用:

1. 涟漪效果所需的CSS样式。

button .circle {
  position: absolute;
  background-color: #fff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: scale 0.5s ease-out;
}
 
@keyframes scale {
  to {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

2. 将涟漪点击效果附加到所有 CSS 类为 'ripple' 的按钮上。

<button class="ripple">点击我</button>
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.offsetLeft
        const xInside = x - buttonLeft
        const yInside = y - buttonTop
        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = yInside + 'px'
        circle.style.left = xInside + 'px'
        this.appendChild(circle)
        setTimeout(() => circle.remove(), 500)
    })
})

官方网站:https://github.com/mydever/buttonrippleeffect

相关热词: 波纹效果

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库