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

Question

我遇到圆圈旋转问题。

问题： - 我有一个外圈，上面有几个圆圈。在那几个圆圈中有一个图像。但在圆的旋转，图像也旋转，我不想要。图像必须固定在圆形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>