Question

编辑：我稍微改了一下，所以它们是正方形而不是圆形，因为它指出它更容易理解我的意思

ORIGINAL：我一直在玩CSS3动画来完成我正在做的项目，但我觉得我的逻辑错了。

我需要做两件事，创建一系列八个旋转圆圈进行轨道运动并进行设置，以便当您将鼠标悬停在八个圆圈中的任何一个上时，它们会暂停并保持与页面打开时相同的方向。

我设法将八个圆圈设置成轨道但是我们无法弄清楚如何阻止每个圆圈旋转其方向。

我不知道这是否可行但是经过几天的努力决定看看这里是否有人可以帮助我，下面是代码的jsfiddle链接（如果你将鼠标悬停在其中一个圆圈上你应该看到四分之一每当您将鼠标移开并重新移回时，它会突出显示并更改方向。）

我尝试了两种方法来改变方向，但他们似乎什么也没做。

.Rm, .Tm, .P, .Sc, .Sf, .D, .R, .A{
-webkit-animation: wrapper 15s linear infinite normal;
-moz-animation: wrapper 15s linear infinite normal;
-ms-animation: wrapper 15s linear infinite normal;
-o-animation: wrapper 15s linear infinite normal;
animation: wrapper 15s linear infinite normal;
}

和..

.Rm, .Tm, .P, .Sc, .Sf, .D, .R, .A{
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
-o-animation: none;
animation: none;
}

Answer 1

让他们进入一个向一个方向旋转的容器内，而每个方向都朝着相反的方向旋转：

＆＃13;

body {
  background-color: skyblue;  
}

#container {
  width: 200px;
  height: 200px;
  border-radius:50%;
  border: 4px solid lightblue;
  position: relative;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#container div {  
  width:20px;
  height: 20px;
  outline: 2px solid red;
  position: absolute;
  animation-name: example2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#a1 {
  top:30px;
  left:30px;
}

#a2 {
  top:5px;
  left:calc(50% - 10px);
}

#a3 {
  top: 30px;
  left:calc(100% - 50px);
}

#a4 {
  top:calc( 50% - 10px);
  left:calc(100% - 25px);
}

#a5 {
  top:calc(100% - 50px);
  left:calc(100% - 50px);
}

#a6 {
  top:calc( 100% - 25px);
  left:calc( 50% - 10px);
}

#a7 {
  top:calc( 100% - 50px);
  left: 30px;
}

#a8 {
  top:calc( 50% - 10px);
  left:5px;
}

@keyframes example {
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Safari */
    transform: rotate(360deg);
  }
}

@keyframes example2 {
  100% {
    -ms-transform: rotate(-360deg); /* IE 9 */
    -webkit-transform: rotate(-360deg); /* Safari */
    transform: rotate(-360deg);
  }
}

img {
  width:20px;
  height:20px;
}

#container:hover, #container:hover div {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

＆＃13;

<div id=container>
<div id=a1><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a2><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a3><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a4><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a5><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a6><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a7><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
<div id=a8><img src="http://i.imgur.com/p6sVAWS.png" alt=star></div>
</div>

＆＃13;

codepen

CSS3动画：子div是否可以与父div相反？

1 个答案: