我希望所有文字保持笔直。圆圈在移动。请 这是我的代码。
var smallCircle = $(".circle-main ul li").length;
var eachRotate = 360 / smallCircle;
var circleDimansion = 3;
for(i=0;smallCircle>=i;i++){
$(".circle-main ul li").eq(i).css('transform','rotate('+eachRotate*i+'deg)');
$(".circle-main ul li").eq(i).children('div').css('transform','rotate(-'+eachRotate*i+'deg)');
}.circle-main, .circle-wrap, .circle-main:before, .small-circle,
.circle { border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%;}
@keyframes spin { to { transform: rotate(1turn);}}
@keyframes respin { to { transform: rotate(-1turn);}}
body { font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333; background:url(bg.jpg) center center repeat #054e79; background-size:cover; height:100%; position:absolute; width:100%; overflow:hidden;}
.circle-wrap { width:500px; height:500px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
.circle-main { position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #306c91;
animation: spin 60s linear infinite;
animation-play-state: running; }
.circle-main:before { position:absolute; content:""; top:5px; left:5px; right:5px; bottom:5px; border:1px solid #165983; }
.circle-main:hover {animation-play-state: paused;}
.circle-main ul { position:absolute; width:100%; height:100%; margin:0; left:0; padding:0; top:0; }
.circle-main ul li { position:relative; width:100%; background:red; position:absolute; list-style:none; left:0; top:50%; }
.circle-main ul li .small-circle { position:absolute; right:-35px; width:70px; height:70px; text-align:center; line-height:70px; background:#fff; color:#333; font-size:24px; }
.circle-main ul li .small-circle { animation: respin 60s linear infinite; animation-play-state: running;}
.circle-main:hover ul li .small-circle {animation-play-state: paused;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle-wrap">
<div class="circle-main">
<ul>
<li>
<div class="small-circle">1</div>
</li>
<li>
<div class="small-circle">2</div>
</li>
<li>
<div class="small-circle">3</div>
</li>
<li>
<div class="small-circle">4</div>
</li>
<li>
<div class="small-circle">5</div>
</li>
<li>
<div class="small-circle">6</div>
</li>
<li>
<div class="small-circle">7</div>
</li>
<li>
<div class="small-circle">8</div>
</li>
<li>
<div class="small-circle">9</div>
</li>
<li>
<div class="small-circle">10</div>
</li>
</ul>
</div>
</div>
答案 0 :(得分：1)
每个.small-circle旋转不正确，因为你的JS正在设置一个旋转，但是你在CSS中动画了相同元素的旋转。你需要做的是，只旋转数字本身，而不是旋转校正的.small-circle。
我在每个数字周围添加了div.number包装，并将respin动画应用于它。现在它按预期工作。
var smallCircle = $(".circle-main ul li").length;
var eachRotate = 360 / smallCircle;
var circleDimansion = 3;
for (i = 0; smallCircle >= i; i++) {
$(".circle-main ul li").eq(i).css('transform', 'rotate(' + eachRotate * i + 'deg)');
$(".circle-main ul li").eq(i).children('div').css('transform', 'rotate(-' + eachRotate * i + 'deg)');
}.circle-main,
.circle-wrap,
.circle-main:before,
.small-circle,
.circle {
border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
@keyframes respin {
to {
transform: rotate(-1turn);
}
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
background: url(bg.jpg) center center repeat #054e79;
background-size: cover;
height: 100%;
position: absolute;
width: 100%;
overflow: hidden;
}
.circle-wrap {
width: 500px;
height: 500px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.circle-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #306c91;
animation: spin 60s linear infinite;
animation-play-state: running;
}
.circle-main:before {
position: absolute;
content: "";
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 1px solid #165983;
}
.circle-main:hover {
animation-play-state: paused;
}
.circle-main ul {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
left: 0;
padding: 0;
top: 0;
}
.circle-main ul li {
position: relative;
width: 100%;
background: red;
position: absolute;
list-style: none;
left: 0;
top: 50%;
}
.circle-main ul li .small-circle {
position: absolute;
right: -35px;
width: 70px;
height: 70px;
text-align: center;
line-height: 70px;
background: #fff;
color: #333;
font-size: 24px;
}
.circle-main ul li .small-circle .number {
animation: respin 60s linear infinite;
animation-play-state: running;
}
.circle-main:hover ul li .small-circle .number {
animation-play-state: paused;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="circle-wrap">
<div class="circle-main">
<ul>
<li>
<div class="small-circle">
<div class="number">
1
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
2
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
3
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
4
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
5
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
6
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
7
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
8
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
9
</div>
</div>
</li>
<li>
<div class="small-circle">
<div class="number">
10
</div>
</div>
</li>
</ul>
</div>
</div>