javascript - 圆圈中的图标/图像随着圆圈的旋转而旋转

Question

我遇到了圆圈旋转的问题。

问题:- 我有一个外圈，上面有几个圆圈。在那几个圆圈中有一个图像。但是在 circle 旋转时，图像也会旋转，这是我不想要的。图像必须固定在圆 div 内。

.circular_blue {

height: 400px;

width:400px;

-webkit-animation-name: spin_1;

-webkit-animation-duration: 40000ms;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-name: spin_1;

-moz-animation-duration: 40000ms;

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-ms-animation-name: spin_1;

-ms-animation-duration: 40000ms;

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

animation-name: spin_1;

animation-duration: 40000ms;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

@-ms-keyframes spin_1 {

from { -ms-transform: rotate(0deg); }

to { -ms-transform: rotate(360deg); }

}

@-moz-keyframes spin_1 {

from { -moz-transform: rotate(0deg); }

to { -moz-transform: rotate(360deg); }

}

@-webkit-keyframes spin_1 {

from { -webkit-transform: rotate(0deg); }

to { -webkit-transform: rotate(360deg); }

}

@keyframes spin_1 {

from {

transform:rotate(0deg);

}

to {

transform:rotate(360deg);

}

}

.circular_reverse{

height: 200px;

width:200px;

position: absolute;

top: 24%;

left: 7%;

-webkit-animation-name: spin_2;

-webkit-animation-duration: 40000ms;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

-moz-animation-name: spin_2;

-moz-animation-duration: 40000ms;

-moz-animation-iteration-count: infinite;

-moz-animation-timing-function: linear;

-ms-animation-name: spin_2;

-ms-animation-duration: 40000ms;

-ms-animation-iteration-count: infinite;

-ms-animation-timing-function: linear;

animation-name: spin_2;

animation-duration: 40000ms;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

@-ms-keyframes spin_2 {

from { -ms-transform: rotate(360deg); }

to { -ms-transform: rotate(0deg); }

}

@-moz-keyframes spin_2 {

from { -moz-transform: rotate(360deg); }

to { -moz-transform: rotate(0deg); }

}

@-webkit-keyframes spin_2 {

from { -webkit-transform: rotate(360deg); }

to { -webkit-transform: rotate(0deg); }

}

@keyframes spin_2 {

from {

transform:rotate(360deg);

}

to {

transform:rotate(0deg);

}

}

<div class="circular_blue">

<div style="height:400px;width:400px;border:3px dotted red;;border-radius:50%;/*! position: absolute; */">

<div style="height: 100px;width: 100px;background: #c6b7b7;border-radius: 50%;/*! display: table; */position: relative;">

<img src="http://lorempixel.com/100/100/city/" style="height: 50px;position: absolute;z-index: 999999;top: 27%;/*! display: table-cell; *//*! vertical-align: middle; *//*! width: 50px; */left: 24%;">

</div>

</div>

</div>

我想要的是，当旋转外圈时，内圈应该旋转但图像/图标不旋转。

任何帮助都会很棒。

谢谢。

Answer 1

您可以通过在每个图像上反向运行动画来“撤消”动画效果:

.circular_blue img {
    animation-direction: reverse;
    // other animation stuff
}

但是，我注意到您的代码中有大量 -<browser>-animation-<stuff>行，所以我想我会提到有 a shorthand -<browser>-animation property这使您可以一次设置所有内容:

.circular_blue img {
  -webkit-animation: 40s linear infinite reverse spin_1;
  -moz-animation: 40s linear infinite reverse spin_1;
  -ms-animation: 40s linear infinite reverse spin_1;
  animation: 40s linear infinite reverse spin_1;
}

.circular_blue {
  height: 400px;
  width: 400px;
  -webkit-animation: 40s linear infinite spin_1;
  -moz-animation: 40s linear infinite spin_1;
  -ms-animation: 40s linear infinite spin_1;
  animation: 40s linear infinite spin_1;
}

@-ms-keyframes spin_1 {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin_1 {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin_1 {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
@keyframes spin_1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<div class="circular_blue">
  <div style="height:400px;width:400px;border:3px dotted red;;border-radius:50%;/*! position: absolute; */">
    <div style="height: 100px;width: 100px;background: #c6b7b7;border-radius: 50%;/*! display: table; */position: relative;">
      <img src="http://lorempixel.com/100/100/city/" style="height: 50px;position: absolute;z-index: 999999;top: 27%;/*! display: table-cell; *//*! vertical-align: middle; *//*! width: 50px; */left: 24%;">
    </div>
  </div>
</div>