CSS 流光发光按钮

    <template>
    	<view class="content">
    		<view class="a">
    			<text></text>
    			<text></text>
    			<text></text>
    			<text></text>
    			发光按钮
    		</view>
    	</view>
    </template>

    <script>

    </script>

    <style>
    	body {
    	    background-color: black;   /* 设置页面背景色为黑色 */
    	}
    	.content {
    	    display: flex;
    	    flex-direction: column;   /* 将元素垂直排列 */
    	    align-items: center;   /* 水平居中对齐 */
    	    justify-content: center;   /* 垂直居中对齐 */
    	    margin-top: 300px;   /* 顶部外边距为300像素 */
    	}
    	.a {
    	    position: relative;   /* 设置容器为相对定位 */
    	    color: #03e9f4;   /* 设置文本颜色为亮蓝色 */
    	    text-decoration: none;   /* 取消文本的下划线 */
    	    transition: 0.5s;   /* 设置过渡效果的时间为0.5秒 */
    	    letter-spacing: 4px;   /* 设置字符间距为4像素 */
    	    overflow: hidden;   /* 隐藏溢出内容 */
    	    padding: 25px 50px;   /* 设置内边距 */
    	}
    	.a:hover {
    	    background: #03e9f4;   /* 鼠标悬停时，设置背景色为亮蓝色 */
    	    color: #050801;   /* 鼠标悬停时，设置文本颜色为深蓝色 */
    	    box-shadow: 0 0 5px #03e9f4,   /* 添加阴影效果 */
    	                0 0 25px #03e9f4,
    	                0 0 50px #03e9f4,
    	                0 0 200px #03e9f4;
    	    -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);   /* 添加反射效果 */
    	}
    	.a:nth-child(1) {
    	    filter: hue-rotate(270deg);   /* 对第一个元素应用色相旋转 */
    	}
    	.a:nth-child(2) {
    	    filter: hue-rotate(110deg);   /* 对第二个元素应用色相旋转 */
    	}
    	.a text {
    	    position: absolute;   /* 设置绝对定位 */
    	    display: block;   /* 显示为块级元素 */
    	}
    	.a text:nth-child(1) {
    	    top: 0;   /* 设置顶部位置为0 */
    	    left: 0;   /* 设置左侧位置为0 */
    	    width: 100%;   /* 宽度为100% */
    	    height: 2px;   /* 高度为2像素 */
    	    background: linear-gradient(90deg,transparent,#03e9f4);   /* 应用线性渐变背景色 */
    	    animation: animate1 1s linear infinite;   /* 应用动画效果 */
    	}
    	@keyframes animate1 {
    	    0% {
    	        left: -100%;   /* 动画开始时，设置左侧位置为-100% */
    	    }
    	    50%, 100% {
    	        left: 100%;   /* 动画中和动画结束时，设置左侧位置为100% */
    	    }
    	}
    	.a text:nth-child(2) {
    	    top: -100%;   /* 设置顶部位置为-100% */
    	    right: 0;   /* 设置右侧位置为0 */
    	    width: 2px;   /* 宽度为2像素 */
    	    height: 100%;   /* 高度为100% */
    	    background: linear-gradient(180deg,transparent,#03e9f4);   /* 应用线性渐变背景色 */
    	    animation: animate2 1s linear infinite;   /* 应用动画效果 */
    	    animation-delay: 0.25s;   /* 延迟0.25秒执行动画 */
    	}
    	@keyframes animate2 {
    	    0% {
    	        top: -100%;   /* 动画开始时，设置顶部位置为-100% */
    	    }
    	    50%, 100% {
    	        top: 100%;   /* 动画中和动画结束时，设置顶部位置为100% */
    	    }
    	}
    	.a text:nth-child(3) {
    	    bottom: 0;   /* 设置底部位置为0 */
    	    right: 0;   /* 设置右侧位置为0 */
    	    width: 100%;   /* 宽度为100% */
    	    height: 2px;   /* 高度为2像素 */
    	    background: linear-gradient(270deg,transparent,#03e9f4);   /* 应用线性渐变背景色 */
    	    animation: animate3 1s linear infinite;   /* 应用动画效果 */
    	    animation-delay: 0.50s;   /* 延迟0.5秒执行动画 */
    	}
    	@keyframes animate3 {
    	    0% {
    	        right: -100%;   /* 动画开始时，设置右侧位置为-100% */
    	    }
    	    50%, 100% {
    	        right: 100%;   /* 动画中和动画结束时，设置右侧位置为100% */
    	    }
    	}
    	.a text:nth-child(4) {
    	    bottom: -100%;   /* 设置底部位置为-100% */
    	    left: 0;   /* 设置左侧位置为0 */
    	    width: 2px;   /* 宽度为2像素 */
    	    height: 100%;   /* 高度为100% */
    	    background: linear-gradient(360deg,transparent,#03e9f4);   /* 应用线性渐变背景色 */
    	    animation: animate4 1s linear infinite;   /* 应用动画效果 */
    	    animation-delay: 0.75s;   /* 延迟0.75秒执行动画 */
    	}
    	@keyframes animate4 {
    	    0% {
    	        bottom: -100%;   /* 动画开始时，设置底部位置为-100% */
    	    }
    	    50%, 100% {
    	        bottom: 100%;   /* 动画中和动画结束时，设置底部位置为100% */
    	    }
    	}
    </style>