CSS系列----水波浪.radius { width: 50px; height: 50px; background-

<style>
			#box {
				width: 200px;
				height: 200px;
				background-color: #68CCCA;
				opacity: 0.5;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.radius {
				width: 50px;
				height: 50px;
				background-color: #F44E3B;
				border-radius: 50%;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

			.juxin {
				width: 100px;
				height: 100px;
				background-color: #68CCCA;
				border-radius: 30%;
				position: absolute;
				top: -70px;
				/* left: 50%;
      transform:translateX(-50%); */
				animation: identifier 8s linear infinite;
			}

			@keyframes identifier {
				0% {
					top: -70px;
					transform: rotate(0deg);
				}

				100% {
					top: -70px;
					transform: rotate(360deg);
				}
			}
		</style>

<body>

	<div class="radius">
		<div class="juxin"></div>
	</div>
</body>