发光按钮的组件化封装

<template>
    <div id="sunbtn">
        <p id="btn">sun-button</p>
        </div>
</template>
<script>
export default {
    name:"sunbtn",
}
</script>
<style scoped>
#sunbtn{
    position:relative;
    width:100%;
    height:140px;
    /* background-color:black; */
}


        #btn{
            /* position:absolute;

            top:0;

            left:0;

            right:0;

            bottom:0;

            margin:auto; */

            position:absolute;

             top:30%;

            left:50%;

            transform:translate(-50%,-50%); 

            width:400px;

            height:100px;

            background-image:linear-gradient(135deg, #03a9f4,#f441a5,#ffeb3b,#09a8f4);

            text-transform:capitalize;

            color:white;

            line-height:100px;

            font-size:25px;

            font-weight:600;

            text-align:center;

           

            border-radius:100px;

            /* background-size:80%; */

            cursor:pointer;

            /* background-repeat:no-repeat; */

            /* z-index:2; */

        }

        p:hover{
            animation-name:sun;

            animation-duration:32s;

            animation-iteration-count:infinite;

        }

        p:hover::before{
            animation-name:sun;

            animation-duration:14s;

            animation-iteration-count:infinite;

        }

        p::before{
            content:"";

            position:absolute;

            top:-10px;

            right:-10px;

            left:-10px;

            bottom:-10px;

            border-radius:100px;

            background-image:linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);

            z-index:-1;

            filter:blur(28px);

            background-size:200%;

           

           

        }

       

        @keyframes sun{
            100%{
                background-position:-800% 0;

               

            }

        }
</style>

  使用方法：创建vue文件（例如sunbtn.vue），然后粘贴代码，使用时在别的文件中使用import导入，然后在components中注册，最后直接使用自己命名的组件名就可，例如

显示效果如下：