自定义指令实现按钮点击波纹效果

最新推荐文章于 2023-05-23 15:47:50 发布

原创

最新推荐文章于 2023-05-23 15:47:50 发布 · 673 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

该文章介绍了如何在Vue.js项目中创建一个水波纹点击效果。通过新建CSS和JavaScript文件，定义样式和事件处理，然后在Vue中注册自定义指令，使得按钮在被点击时产生水波纹扩散的视觉效果。

最近看到一个按钮点击出现水波纹的效果，还是很不错的，记录一下实现步骤，先上效果

1. 新建wave文件夹，新建waves.css文件，内容如下

.waves-ripple {
    position: absolute;
    border-radius: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    background-clip: padding-box;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 1;
}

.waves-ripple.z-active {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    transform: scale(2);
    -webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
    transition: opacity 1.2s ease-out, transform 0.6s ease-out;
    transit