先上效果图

 这是实现代码:

<view class="conl_btn">
	<view class="conlbtn">
		<view class="conlbtncenter">
			<view>开启盲盒</view>
		</view>
		<view class="conlitem"></view>
		<view class="conlitem"></view>
		<view class="conlitem"></view>
	</view>
</view>

css部分

		.conlbtncenter view {
			--borderWidth: 5px;
			position: relative;
			background-color: white;
			border-radius: 50%;
			width: 180upx;
			height: 180upx;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.conlbtncenter view:after {
			content: '';
			position: absolute;
			top: calc(-1 * var(--borderWidth));
			left: calc(-1 * var(--borderWidth));
			height: calc(100% + var(--borderWidth) * 2);
			width: calc(100% + var(--borderWidth) * 2);
			// 渐变边框颜色
			background: linear-gradient(60deg, #fa374a, #2bc271, #ff8669, #9856fc, #fad86a, #5fd9f9, #4c68ef, #6f43e4);
			border-radius: 50%;
			z-index: -1;
			animation: animatedgradient 3s ease alternate infinite;
			background-size: 300% 300%;
		}

		@keyframes animatedgradient {
			0% {
				background-position: 0% 50%;
			}

			50% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}

		.conlbtn {
			position: relative;
			width: 200upx;
			height: 200upx;
			border-radius: 50%;
			margin: 50upx 0;
		}

		.conlbtn .conlbtncenter {
			position: relative;
			z-index: 2;
			font-size: 30upx;
			background: #fff;
			color: #8075ad;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
		}

		@keyframes ripples {
			from {
				transform: scale(1);
				opacity: 0.6;
			}

			to {
				transform: scale(1.4);
				opacity: 0;
			}
		}

		.conlitem {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			background: #d3b9ff;
			border-radius: 50%;
			animation: ripples 2s 0ms linear infinite;
			z-index: 0;
		}

		.conlitem:nth-child(2n) {
			animation-delay: 0.5s;
		}

		.conlitem:nth-child(3n) {
			animation-delay: 1s;
		}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐