纯css3实现水波纹从中心向四周扩散动画

纯css3实现水波纹从中心向四周扩散动画

效果可用于pc端或移动端,引导用户点击,间接带来一定的转化率

示例效果

示例代码

<template>
    <div class="zanbtn-wrap">
        <div @click="handleClick('https://pay.aikelaidev.cn/paypage/?merchant=35bdYxSx7dCUrVUBqFQjdqqlzhWryCA7lqOn9VhakWHC')" class="zanBtn">赞</div>
    </div>
</template>
<script>
export default {
    name:'shuibowen',
    methods: {
        handleClick(openUrl) {
            window.open(openUrl, "_blank");
        }
    }

}
</script>
<style scoped>
@keyframes zanBtnAnimation {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(255, 37, 37, 0);
  }

  10% {
    bo