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

CSS3水波纹扩散动画实现

最新推荐文章于 2024-11-07 15:30:46 发布

原创

最新推荐文章于 2024-11-07 15:30:46 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #javascript #html #css

这篇博客介绍了如何仅使用CSS3创建水波纹从中心向四周扩散的动画效果，适用于PC和移动端，可以提升用户体验和转化率。示例代码展示了关键帧动画和盒阴影的运用。

纯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% {
    box-shadow: 0px 0px 0px 1px rgba(0,&