cloud_admin_app/components/piaoyi-text-animate3/piaoyi-text-animate3.vue

<template>
	<view class="piaoyi-text-animate3">
		<div class="g-container">
			<div class="g-number">{{text}}%</div>
			<div class="g-contrast">
				<div class="g-circle"></div>
				<!-- <view class="g-bubbles">
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
					<view class="li"></view>
				</view> -->
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: Number,
				default: 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.piaoyi-text-animate3 {
		width: 100%;
		height: 100%;
		display: flex;
		background: #f7f6f6 !important;
		overflow: hidden;
	}

	.g-number {
		position: absolute;
		width: 300px;
		top: 27%;
		text-align: center;
		font-size: 32px;
		z-index: 10;
		color: #000;
	}

	.g-container {
		position: relative;
		width: 300px;
		height: 400px;
		margin: auto;
	}

	.g-contrast {
		// filter: contrast(10) hue-rotate(0);
		width: 300px;
		height: 400px;
		background-color: #f7f6f6 !important;
		overflow: hidden;
		animation: hueRotate 10s infinite linear;
	}

	.g-circle {
		position: relative;
		width: 300px;
		height: 300px;
		box-sizing: border-box;
		filter: blur(8px);

		&::after {
			content: "";
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%) rotate(0);
			width: 200px;
			height: 200px;
			// background-color: #00ff6f;
			background-color: #0abf49;
			border-radius: 42% 38% 62% 49% / 45%;
			animation: rotate 10s infinite linear;
		}

		&::before {
			content: "";
			position: absolute;
			width: 176px;
			height: 176px;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: #f7f6f6;
			z-index: 10;
		}
	}

	.g-bubbles {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 100px;
		height: 40px;
		transform: translate(-50%, 0);
		border-radius: 100px 100px 0 0;
		background-color: #00ff6f;
		filter: blur(5px);
	}

	.li {
		position: absolute;
		border-radius: 50%;
		background: #00ff6f;
	}

	@for $i from 0 through 15 {
		.li:nth-child(#{$i}) {
			$width: 15 + random(15) + px;
			left: 15 + random(70) + px;
			top: 50%;
			transform: translate(-50%, -50%);
			width: $width;
			height: $width;
			animation: moveToTop #{random(6) + 3}s ease-in-out -#{random(5000)/1000}s infinite;
		}
	}

	@keyframes rotate {
		50% {
			border-radius: 45% / 42% 38% 58% 49%;
		}

		100% {
			transform: translate(-50%, -50%) rotate(720deg);
		}
	}

	@keyframes moveToTop {
		90% {
			opacity: 1;
		}

		100% {
			opacity: .1;
			transform: translate(-50%, -180px);
		}
	}

	@keyframes hueRotate {
		100% {
			filter: contrast(15) hue-rotate(360deg);
		}
	}
</style>