纯css3动画---粒子效果按钮组件封装（vue）

前言：先声明一下，按钮并非原创，而是引用掘金大佬的一篇文章，突发奇想做了一个简单封装，如有侵权，欢迎来搞，本人立刻删文，如果对本文由什么新的想法或好的意见，欢迎留言。
作者：XboxYan
文章链接CSS实现一个粒子动效的按钮

子组件中：

<template>
    <div>
        <button class="button" v-debounce="clickBtn">
            <slot name="content"></slot>
        </button>
    </div>
</template>
<script>
export default {
    props:{
        color:{
            type:String,
            default:'#fff',
        },
        fontSize:{
            type:String,
            default:'16px'
        },
        fontFamily:{
            type:String,
            default:'方正黑体'
        }
    },
    mounted(){
        // 样式在这里设置
        // 目前苹果手机中微信扫码预览不支持css3动画效果，不知为何，暂未解决（可能是不支持在伪元素中写动画）
        // 这种设置封装组件样式的写法不知规不规范，请大佬留言指点
        document.querySelector(".button").style.fontSize = this.fontSize;
        document.querySelector(".button").style.color = this.color;
    },
    // 自定义按钮提交节流点击事件
    directives: {
		debounce: {
			inserted: function (el, binding) {
				let timer
				el.addEventListener('click', () => {
					if (timer) {
						clearTimeout(timer)
					}
					timer = setTimeout(() => {
						binding.value()
					}, 300)
				})
			}
		}
	},
    methods:{
        clickBtn(){
            // 点击事件可在此处调用，并可传入参数
            this.$emit('clickFn',123)
        }
    }
}
</script>
<style>
body {
    font-size: 16px;/*px*/
    font-family: "Helvetica", "Arial", sans-serif;
    text-align: center;
    background-color: #f8faff;
    /* padding: 100px; */
}
h2 {
    padding-bottom: 2em;
}
.button {
    display: inline-block;
    margin: 30px auto;
    padding: 1em 2em;
    background-color: #ff0081;
    color: #fff;
    border-radius: 4px;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
    outline: 0;
    transition: transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -webkit-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -o-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
    transition: -moz-transform ease-in 0.1s, background-color ease-in 0.1s,
        box-shadow ease-in 0.25s;
}

.button::before {
    position: absolute;
    content: "";
    left: -2em;
    right: -2em;
    top: -2em;
    bottom: -2em;
    pointer-events: none;
    transition: ease-in-out 0.5s;
    background-repeat: no-repeat;
    /* 按钮泡沫效果 */
    background-image: radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
        10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%,
        20% 20%;
    background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    animation: bubbles ease-in-out 0.75s forwards;
    -webkit-animation: bubbles ease-in-out 0.75s forwards;
    -o-animation: bubbles ease-in-out 0.75s forwards;
    -moz-animation: bubbles ease-in-out 0.75s forwards;
}

.button:active {
    transform: scale(0.95);
    background-color: #f3037c;
    box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
}
.button:active::before {
    animation: none;
    background-size: 0;
}
@keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-webkit-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-o-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
@-moz-keyframes bubbles {
    0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%,
        65% 30%, 80% 32%, 15% 60%, 83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%,
        64% 70%, 80% 71%;
    }
    50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%,
        75% 0%, 95% -2%, 0% 80%, 95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%,
        68% 96%, 95% 100%;
    }
    100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%,
        100% -2%, -5% 80%, 100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%,
        100% 100%;
        background-size: 0% 0%;
    }
}
</style>

父组件中调用：
1、htnl部分：

<!-- 封装的按钮组件 -->
<!-- 支持传入字体颜色，字号，点击事件（可传参），按钮文案 -->
<!-- 本想按钮效果颜色及背景色都从父组件传递,不知如何下手,目前只能在子组件修改 -->
	<Btn :color="color" :fontSize="fontSize" :fontFamily="fontFamily" @clickFn="fn($event)">
		<span slot="content">submit</span>
	</Btn>

2、script部分

<script>
import Btn from "@/components/Btn";
export default {
	components: {
		Btn
	},
	data(){
		return {
			color:"#fff",
			fontSize:"20px",
			background:'#ff0081',
			fontFamily:'微软雅黑'
		}
	},
	methods: {
		fn(params){
			console.log(params)
		},
	}
};
</script>

代码中有注释。