<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中注册，最后直接使用自己命名的组件名就可，例如

显示效果如下：

?

?