纯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