CSS粉丝动画

Question

我有三个不同的图像,我想应用像动画一样的粉丝.

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

这是代码(我在代码中使用了虚拟图像)

.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;
  }
}

<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>

这是小提琴: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>