编写html字体旋转代码文字不停地旋转形成一个圆圈b并加上颜色渐变的特效

日期: 2028-04-29

标签: 教育

<!DOCTYPE html>
<html>
<head>
	<title>Text Rotation Circle</title>
	<style>
		.container {
			position: relative;
			width: 400px;
			height: 400px;
			margin: 50px auto;
			border: 2px solid black;
			border-radius: 50%;
			overflow: hidden;
		}
		.text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 24px;
			font-weight: bold;
			color: white;
			animation: rotate 20s linear infinite;
			background: linear-gradient(to right, #ff9966, #ff5e62);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		@keyframes rotate {
			from {
				transform: translate(-50%, -50%) rotate(0deg);
			}
			to {
				transform: translate(-50%, -50%) rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="text">Text Rotation Circle</div>
	</div>
</body>
</html

原文地址: https://www.cveoy.top/t/topic/eFip 著作权归作者所有。请勿转载和采集!