CSS粉丝动画

Question

我有三个不同的图像，我想要应用像动画一样的粉丝。

我不能在Photoshop中对图像进行分类，因为我希望图像一个接一个地出现。

这是代码（我在代码中使用了虚拟图像）

＆＃13;

＆＃13;

.bannerimg{
  position:relative;
}

.bannerimg img{
  position:absolute;
  max-width:500px;
}

.bannerimg .bannerhtml{
  -ms-transform: rotate(300deg); /* IE 9 */
  -webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */
  transform: rotate(300deg);
  max-width:175px;
  left:50px;
  -webkit-animation: fadeIn 500ms ease-in-out 200ms both;
  animation: fadeIn 500ms ease-in-out 200ms both;
}

.bannerimg .bannercss{
  -ms-transform: rotate(63deg); /* IE 9 */
  -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
  transform: rotate(63deg);
  max-width:170px;
  top:9px;
  left:227px;
  -webkit-animation: fadeIn 500ms ease-in-out 600ms both;
  animation: fadeIn 500ms ease-in-out 600ms both;
}

.bannerimg .bannerjs{
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  max-width:175px;
  top:150px;
  left:135px;
  -webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
  animation: fadeIn 500ms ease-in-out 1000ms both;
}

.windmill
{
  animation: spin-clockwise 1.25s linear 1200ms infinite;
  transform-origin: 30% 100%;
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

＆＃13;

<div class="bannerimg windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

＆＃13;

＆＃13;

＆＃13;

这是小提琴：http://jsfiddle.net/wzht89r3/2/

解决方案也可以是jquery或javascript。

Answer 1

这样的东西？我刚刚更改了transform-origin规则的.windmill。

.bannerimg{
  position:relative;
}

.bannerimg img{
  position:absolute;
  max-width:500px;
}

.bannerimg .bannerhtml{
  transform: rotate(300deg);
  max-width:175px;
  left:50px;
  -webkit-animation: fadeIn 500ms ease-in-out 200ms both;
  animation: fadeIn 500ms ease-in-out 200ms both;
}

.bannerimg .bannercss{
  -ms-transform: rotate(63deg); /* IE 9 */
  -webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
  transform: rotate(63deg);
  max-width:170px;
  top:9px;
  left:227px;
  -webkit-animation: fadeIn 500ms ease-in-out 600ms both;
  animation: fadeIn 500ms ease-in-out 600ms both;
}

.bannerimg .bannerjs{
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  max-width:175px;
  top:150px;
  left:135px;
  -webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
  animation: fadeIn 500ms ease-in-out 1000ms both;
}

.windmill
{
  animation: spin-clockwise 1.25s linear 1200ms infinite;
  transform-origin: 220px 150px;
}

@keyframes spin-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

<div class="bannerimg windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>

Answer 2

我个人会删掉那些额外的类并使用:nth-child pseudo class。让每个孩子拥有它自己的偏移量（例如：top:150px; left:135px;）意味着每次更改图像时都必须重新计算定位，所以我删除了它们并找到了另一种定位方式。

我使用不同的图像，因为他们面对错误的方向。为此，箭头必须面向旋转原点，在这种情况下为0 0或左上角。

为了压缩答案，我删除了所有供应商前缀和淡入过渡。

＆＃13;

＆＃13;

#windmill {
  animation: spin-clockwise 2s linear 1200ms infinite;
  transform-origin: 0 0;
  position: relative;
  top: 100px; /*Image dimensions*/
  left: 100px;
}
#windmill > * {
  position: absolute;
  transform-origin: 0 0;
}
#windmill > *:nth-child(1) {transform: rotate(0deg);}
#windmill > *:nth-child(2) {transform: rotate(120deg);}
#windmill > *:nth-child(3) {transform: rotate(240deg);}
@keyframes spin-clockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

＆＃13;

<div id="windmill">
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
</div>

＆＃13;

＆＃13;

＆＃13;