文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何设置动画让元素围绕一个圆圈移动？

问如何设置动画让元素围绕一个圆圈移动？
EN

Stack Overflow用户
提问于 2017-07-07 04:30:10
回答 1查看 119关注 0票数 3

我正在尝试实现您在图片中看到的内容：

​

​

图片在这里，以防它被阻止：http://imgur.com/a/wVtgm

在那里你可能只看到一个图标，但实际上有4个图标，图片代表了图标应该走的路径。

我已经创建了一个代码片段，或者这里是一个Codepen

​

代码语言：javascript
复制
var outerBox = $('.eight-box'),
    boxHeight = $(outerBox).height(),
    boxWidth = $(outerBox).width();
function changeNumbers() {
  var pos1 = $('.pos-1'),
      pos2 = $('.pos-2'),
      pos3 = $('.pos-3'),
      pos4 = $('.pos-4');

  $('.col-1').addClass('pos-1');
  $('.col-1').removeClass('pos-4')
  $('.col-2').addClass('pos-2');
  $('.col-2').removeClass('pos-4')
  $('.col-3').addClass('pos-3');
  $('.col-3').removeClass('pos-4')
  
};
// var refreshId = setInterval(changeNumbers, 1500);
changeNumbers();
代码语言：javascript
复制
.eight-box {
	position: relative;
	display: block;
	margin: 1em auto;
	width: 16em;
  height: 16em;
  font-family: sans-serif;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
}
.fig-8 {
	display: block;
	position: absolute;
	color: #fff;
	width: 2em;
  height: 2em;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  font-smoothing: antialiased;
	transition: all .5s linear;
  overflow: hidden;
  z-index: 5;
}

.col-1 {
	background: #1abc9c;
}
.col-2 {
	background: #9b59b6;
}
.col-3 {
	background: #27ae60;
}
.col-4 {
	background: #2c3e50;
}

.pos-1 {
	top: 30%;
	left: 93.75%;
}
.pos-2 {
	top: 66.25%;
	left: 88.75%;
}
.pos-3 {
	top: 72.92%;
	right: 83.125%;
}
.pos-4 {
	top: 19.58%;
	right: 88.75%;
}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eight-box">
  <div class="fig-8 col-1 pos-4">1</div>
  <div class="fig-8 col-2 pos-4">2</div>
  <div class="fig-8 col-3 pos-4">3</div>
  <div class="fig-8 col-4 pos-4">4</div>
</div>

​

这是我应该实现的目标的描述：

1-页面加载时，所有图标必须位于同一位置，也就是您可能会看到数字为4的图标的位置。

2-然后，每个图标应该开始它的路径围绕圆圈，得到坚持到其正常的状态/位置。我的意思是:数字3的图标开始它的轨迹，然后一旦它到达它的位置，它应该停留在那里，和其他图标一样。

现在，如果你看到我做的代码片段，在页面加载后，图标会通过到达它的原始位置来做一些动画，但我无法实现我所需要的，那就是通过绕圈触发图标返回到它的原始位置。

TL;DR:图标从页面加载上图标编号为4的位置开始，然后图标应该通过围绕圆圈从左到右移动回到原来的位置。

例如:图标4应该留在原处。图标3应该在圆圈周围向下移动一些像素。诸若此类。

因此，它们都应该从左侧进入，向右侧移动(如跟随领导者)，并在图片或codepen/codespnippet中的位置结束。

有什么建议吗？

jquery
html
css
javascript
EN

回答 1

Stack Overflow用户

发布于 2017-07-07 20:42:32

你可以使用动画和transform:rotate()从这两支笔中激发自己的灵感。

  • This with inputs to interact :单击1以显示2、3、4、5。然后单击2，然后单击3，...看着他们绕着圆圈转。第一次单击后，您也可以使用箭头键来控制它们。(在代码方面，代码片段比笔稍微优化了一点。)

​

代码语言：javascript
复制
input[name="group"] {position:absolute; right:100vw}

.circle {
  position: relative;
  width: 50vh;
  height: 50vh;
  margin: 25vh auto;
  border: solid 1px;
  border-radius: 100%;
}

.rotate, .rotate label {transition:1s;}

.rotate {
  display: flex;
  align-items: flex-end;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  height: 60%;
  margin-left: -5vh;
  transform-origin: 5vh 0;
}
.rotate:first-child {z-index:1;}

.rotate label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vh;
  height: 10vh;
  border: solid 1px;
  border-radius: 100%;
  background: #0095FF;
  cursor:pointer
}

/* one */
#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a label {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b label {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c label {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d label {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e label {transform:rotate(-0deg);}

/* two */
#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b label {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c label {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d label {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e label {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a label {transform:rotate(-0deg);}

/* three */
#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c label {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d label {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e label {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a label {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b label {transform:rotate(-0deg);}

/* four */
#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d label {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e label {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a label {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b label {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c label {transform:rotate(-0deg);}

/* five */
#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e label {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a label {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b label {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c label {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d label {transform:rotate(-0deg);}
代码语言：javascript
复制
<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate"><label for="one">1</label></div>
  <div id="b" class="rotate"><label for="two">2</label></div>
  <div id="c" class="rotate"><label for="three">3</label></div>
  <div id="d" class="rotate"><label for="four">4</label></div>
  <div id="e" class="rotate"><label for="five">5</label></div>
</div>

​

运行演示动画的

  • 和此：

​

代码语言：javascript
复制
.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white
}

#a {
  transform-origin: 5vh 0;
  transform: rotate(120deg);
  animation: roundcircle 5s infinite;
}

#a  div {
  animation: roundcirclediv 5s infinite;
}

#b {
  transform-origin: 5vh 0;
  transform: rotate(90deg);
  animation: roundcircle 5s -1s infinite;
}

#b div {
  transform: rotate(-90deg);
  animation: roundcirclediv 5s -1s infinite;
}

#c {
  transform-origin: 5vh 0;
  transform: rotate(60deg);
  animation: roundcircle 5s -2s infinite;
}

#c div {
  transform: rotate(-60deg);
  animation: roundcirclediv 5s -2s infinite;
}

#d {
  transform-origin: 5vh 0;
  transform: rotate(30deg);
  animation: roundcircle 5s -3s infinite;
}

#d div {
  transform: rotate(-30deg);
  animation: roundcirclediv 5s -3s infinite;
}

#e {
  transform-origin: 5vh 0;
  transform: rotate(0deg);
  animation: roundcircle 5s -4s infinite;
}

#e div {
  transform: rotate(-0deg);
  animation: roundcirclediv 5s -4s infinite;
}

@keyframes roundcircle {
  0% {
    transform: rotate(120deg);
  }
  20% {
    transform: rotate(360deg)
  }
  40% {
    transform: rotate(390deg)
  }
  60% {
    transform: rotate(420deg)
  }
  80% {
    transform: rotate(450deg)
  }
  100% {
    transform: rotate(480deg);
  }
}

@keyframes roundcirclediv {
  0% {
    transform: rotate(-120deg);
  }
  20% {
    transform: rotate(-360deg)
  }
  40% {
    transform: rotate(-390deg)
  }
  60% {
    transform: rotate(-420deg)
  }
  80% {
    transform: rotate(-450deg)
  }
  100% {
    transform: rotate(-480deg);
  }
}
代码语言：javascript
复制
<div class="circle">
  <div id="a" class="rotate">
    <div>1</div>
  </div>
  <div id="b" class="rotate">
    <div>2</div>
  </div>
  <div id="c" class="rotate">
    <div>3</div>
  </div>
  <div id="d" class="rotate">
    <div>4</div>
  </div>
  <div id="e" class="rotate">
    <div>5</div>
  </div>
</div>

​

  • ，如果你很难理解它是如何工作的，请查看，看看神奇的幕后：

​

代码语言：javascript
复制
input[name="group"] {position:absolute; right:100vw}

.circle {
  height: 50vh;
  width: 50vh;
  border-radius: 100%;
  border: solid 1px;
  margin: 25vh auto;
  position: relative;
}

.rotate {
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vh;
  margin-left: -5vh;
  display: flex;
  align-items: flex-end;
}

.rotate div {
  border-radius: 100%;
  border: solid 1px;
  height: 10vh;
  width: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0095FF;
}

#a, #a div, #b , #b div, #c, #c div, #d, #d div, #e, #e div {transition:1s; box-shadow:0 0 5px}
#a, #b, #c, #d, #e {transform-origin:5vh 0;}
#a {z-index:1;}
label {cursor:pointer}

/* one */

#one:checked ~ .circle #a {transform:rotate(120deg);}
#one:checked ~ .circle #a div {transform:rotate(-120deg);}

#one:checked ~ .circle #b {transform:rotate(90deg);}
#one:checked ~ .circle #b div {transform:rotate(-90deg);}

#one:checked ~ .circle #c {transform:rotate(60deg);}
#one:checked ~ .circle #c div {transform:rotate(-60deg);}

#one:checked ~ .circle #d {transform:rotate(30deg);}
#one:checked ~ .circle #d div {transform:rotate(-30deg);}

#one:checked ~ .circle #e {transform:rotate(0deg);}
#one:checked ~ .circle #e div {transform:rotate(-0deg);}

/* two */

#two:checked ~ .circle #b {transform:rotate(120deg);}
#two:checked ~ .circle #b div {transform:rotate(-120deg);}

#two:checked ~ .circle #c {transform:rotate(90deg);}
#two:checked ~ .circle #c div {transform:rotate(-90deg);}

#two:checked ~ .circle #d {transform:rotate(60deg);}
#two:checked ~ .circle #d div {transform:rotate(-60deg);}

#two:checked ~ .circle #e {transform:rotate(30deg);}
#two:checked ~ .circle #e div {transform:rotate(-30deg);}

#two:checked ~ .circle #a {transform:rotate(360deg);}
#two:checked ~ .circle #a div {transform:rotate(-0deg);}

/* three */

#three:checked ~ .circle #c {transform:rotate(120deg);}
#three:checked ~ .circle #c div {transform:rotate(-120deg);}

#three:checked ~ .circle #d {transform:rotate(90deg);}
#three:checked ~ .circle #d div {transform:rotate(-90deg);}

#three:checked ~ .circle #e {transform:rotate(60deg);}
#three:checked ~ .circle #e div {transform:rotate(-60deg);}

#three:checked ~ .circle #a {transform:rotate(390deg);}
#three:checked ~ .circle #a div {transform:rotate(-30deg);}

#three:checked ~ .circle #b {transform:rotate(360deg);}
#three:checked ~ .circle #b div {transform:rotate(-0deg);}

/* four */

#four:checked ~ .circle #d {transform:rotate(120deg);}
#four:checked ~ .circle #d div {transform:rotate(-120deg);}

#four:checked ~ .circle #e {transform:rotate(90deg);}
#four:checked ~ .circle #e div {transform:rotate(-90deg);}

#four:checked ~ .circle #a {transform:rotate(420deg);}
#four:checked ~ .circle #a div {transform:rotate(-60deg);}

#four:checked ~ .circle #b {transform:rotate(390deg);}
#four:checked ~ .circle #b div {transform:rotate(-30deg);}

#four:checked ~ .circle #c {transform:rotate(360deg);}
#four:checked ~ .circle #c div {transform:rotate(-0deg);}

/* five */

#five:checked ~ .circle #e {transform:rotate(120deg);}
#five:checked ~ .circle #e div {transform:rotate(-120deg);}

#five:checked ~ .circle #a {transform:rotate(450deg);}
#five:checked ~ .circle #a div {transform:rotate(-90deg);}

#five:checked ~ .circle #b {transform:rotate(420deg);}
#five:checked ~ .circle #b div {transform:rotate(-60deg);}

#five:checked ~ .circle #c {transform:rotate(390deg);}
#five:checked ~ .circle #c div {transform:rotate(-30deg);}

#five:checked ~ .circle #d {transform:rotate(360deg);}
#five:checked ~ .circle #d div {transform:rotate(-0deg);}
代码语言：javascript
复制
<input id="one" type="radio"  name="group" />
<input id="two" type="radio" name="group" />
<input id="three" type="radio" name="group" />
<input id="four" type="radio" name="group" />
<input id="five" type="radio" name="group" />

<div class="circle">
  <div id="a" class="rotate">
    <div><label for="one">1</label></div>
  </div>
  <div id="b" class="rotate">
    <div><label for="two">2</label></div>
  </div>
  <div id="c" class="rotate">
    <div><label for="three">3</div>
  </div>
  <div id="d" class="rotate">
    <div><label for="four">4</label></div>
  </div>
  <div id="e" class="rotate">
    <div><label for="five">5</label></div>
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44958320

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档