以下是一个固定转动的带有文字的轮子的html代码我想分别设置这个轮子从左向右移动的速度和文字环绕轮子旋转的速度请修改完善以下html代码
<!DOCTYPE html>
<html>
<head>
<title>旋转的轮子</title>
<style type="text/css">
#wheel {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #000;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
animation: rotateWheel 5s linear infinite;
}
#wheel span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
animation: rotateText 10s linear infinite;
}
@keyframes rotateWheel {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotateText {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wheel">
<span>这是一个带有文字的轮子</span>
</div>
</body>
</html>
<p>注释：在上述代码中，我已经设置了轮子的旋转速度为5秒一圈，文字的环绕速度为10秒一圈。您可以根据需要调整这些值来达到您想要的效果</p>
原文地址: https://www.cveoy.top/t/topic/fk5Y 著作权归作者所有。请勿转载和采集!