CSS实现围绕按钮边框转圈的光线效果

前端学习交流QQ群：1群：173683895 ，2群: 173683866  欢迎加入学习交流进步

承接项目开发，需求功能开发，博主微信号：Jay_09168

CSS实现围绕按钮边框转圈的光线效果，可以自由改变按钮的光线渐变颜色和按钮边框颜色，背景色等。

效果图：

实现完整代码：

<template>
	<view class="btnBlock">
		<view class="btnBian">
 
		view>
		<view class="btn">诊疗之旅view>
	view>
template>
 
<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
		}
	};
script>
 
<style scoped>
	.btnBlock {
		position: relative;
		overflow: hidden;
		height: 100rpx;
		width: 200rpx;
		margin: 50rpx;
		background-color: rgba(255, 105, 180, 0.2);
		border-radius: 3px;
	}
 
	.btnBian {
		height: 200rpx;
		width: 200rpx;
		border-radius: 3px;
		animation: border-line 3s infinite linear;
		z-index: 3;
		transform-origin: 0 0;
		top: 50%;
		left: 50%;
		content: '';
		background: linear-gradient(to bottom, #ffaa7f, #ff5500);
		position: absolute;
 
	}
	@keyframes border-line {
		to {
			transform: rotate(1turn);
		}
	}
 
	.btn {
		z-index: 4;
		height: 90rpx;
		width: 190rpx;
		margin: 2px;
		border-radius: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		background-color: #10647F;
		color:#fff;
	}
 
style>