圆圈动画

时间：2016-02-26 18:57:00

标签： jquery css3 animation geometry

我希望所有文字保持笔直。圆圈在移动。请 这是我的代码。

＆＃13;
＆＃13; 
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)');
	}
＆＃13; 
.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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

每个.small-circle旋转不正确，因为你的JS正在设置一个旋转，但是你在CSS中动画了相同元素的旋转。你需要做的是，只旋转数字本身，而不是旋转校正的.small-circle。

我在每个数字周围添加了div.number包装，并将respin动画应用于它。现在它按预期工作。

＆＃13;
＆＃13; 
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)');
}
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题