编写html代码先画一个圆圈然后文字围绕着这个圆圈的外围转同时这个圆圈从左到右移动

日期: 2025-11-30

标签: 教育

以下是实现您要求的HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>圆圈文字漂移</title>
	<style type="text/css">
		#circle {
			width: 200px;
			height: 200px;
			border-radius: 50%;
			border: 1px solid black;
			position: relative;
			animation: move 5s linear infinite;
		}
		#text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			font-size: 18px;
			animation: spin 5s linear infinite;
		}
		@keyframes move {
			from { left: 0; }
			to { left: calc(100% - 200px); }
		}
		@keyframes spin {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}
	</style>
</head>
<body>
	<div id="circle">
		<div id="text">文字围绕着这个圆圈的外围转</div>
	</div>
</body>
</html>

这段代码创建了一个圆圈和一个围绕圆圈周围旋转的文本。圆圈通过CSS动画从左到右移动，文本通过CSS动画旋转。请注意，这只是一种简单的实现方式，可能有更多高级的方法来实现类似的效果

编写html代码先画一个圆圈然后文字围绕着这个圆圈的外围转同时这个圆圈从左到右移动

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