SOURCE

console 命令行工具 X clear

                    
>
console
<div class="demo-bg">
	<div class="demo">
		<div class="demo-text">632</div>
	</div>
</div>
body,
html {
	background-color: #0d1426;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.demo-bg {
	position: relative;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background-image: linear-gradient(90deg, #162b3c, #77e3ec, #162b3c);
	transform: rotateX(60deg);
}
.demo {
	position: absolute;
	inset: 0;
	margin: 0px 2px 12px;
	border-radius: inherit;
	background-image: linear-gradient(to bottom, #0d1426 0%, #172e3c 100%);
	filter: drop-shadow(0 0 0.75rem crimson);
}

.demo:before {
	position: absolute;
	content: "";
	top: 10px;
	inset-inline: 25px;
	bottom: 50px;
	border-radius: 999px;
	background: #6adfe8;
    animation: rotate 2s linear infinite; 
	padding: 6px;
	-webkit-mask-composite: source-in;
	-webkit-mask: linear-gradient(#0000 0 0) content-box,
		repeating-conic-gradient(from 20deg, #000 0 30deg, #0000 0 60deg);
}
.demo-text {
	position: absolute;
	height: 140px;
	inset-inline: 10px;
	bottom: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(to bottom, transparent 0%, #4590a1 100%);
    animation: gradientAnimation .5s linear infinite;
	color: #cad1d8;
	font-size: 42px;
	font-weight: bold;
	text-shadow: 0 0 5px;
	clip-path: polygon(100% 0, 0 0, 50% 200%);
	transform: scaley(2);
	transform-origin: bottom;
}
@keyframes gradientAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.demo-text::after {
	position: absolute;
	content: "";
	width: 50%;
	height: 30px;
	top: 100%;
	background-image: linear-gradient(to bottom, #4590a1 0%, #468fa0 100%);
	transform: translatey(-50%);
	border-radius: 50%;
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }