纯css实现涟漪效果

本文主要是介绍纯css实现涟漪效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><div id="app"><el-button type="primary" class="primary">按钮一 <span class="mask mask-1"></span></el-button><el-button type="success" class="success">按钮二<span class="mask mask-2"></span></el-button><el-button type="info" class="info">按钮三<span class="mask mask-3"></span></el-button><el-button type="warning" class="warning">按钮四<span class="mask mask-4"></span></el-button></div>
</template><script>
export default {name: "app",
};
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.el-button {position: relative;
}
/*定义一个遮罩层，这是实现的核心 */
.mask {position: absolute;display: block;/*在这里宽高的初始值没必要设置 */height: 100%;background-color: #fff;opacity: 1;
}
/*每个按钮不同的遮罩效果 */
.mask-1 {top: 0;right: 0;
}
.mask-2 {top: 0;left: 0;border-top-right-radius: 40px;
}
.mask-3 {left: 50%;top: 50%;width: 0;height: 0;border-radius: 50%;
}
.mask-4 {left: 0;bottom: 0;height: 0;width: 100%;opacity: 1;border-radius: 4px;
}
/**鼠标悬停按钮时触发动画 */
.primary:hover .mask {/* 动画名称 */animation-name: btn-animation-one;animation-duration: 1s;
}
.success:hover .mask {/* 动画名称 */animation-name: btn-animation-one;animation-duration: 1s;
}
.info:hover .mask {/* 动画名称 */animation-name: btn-animation-three;animation-duration: 1s;
}
.warning:hover .mask {/* 动画名称 */animation-name: btn-animation-four;animation-duration: 1s;
}/* 定义动画 */
@keyframes btn-animation-one {from {/*开始状态 */width: 0;opacity: 1;}to {/*结束状态 */width: 100%;opacity: 0;}
}
/* 该动画效果失败 */
@keyframes btn-animation-three {from { width: 1px;height: 1px;transform: scale(0);opacity: 1;}to { width: 1px;height: 1px;transform: scale(100);opacity: 0;}
}
@keyframes btn-animation-four {from {width: 100%;height: 0;opacity: 1;}to {height: 100%;width: 100%;opacity: 0;}
}
</style>