CSS粉丝动画

我有三个不同的图像，我想应用一个喜欢动画的粉丝。CSS粉丝动画

我不能在Photoshop中关闭图像，因为我希望图像一个接一个出现。

这是代码（I已经在代码中使用虚设图象）

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

来源

2015-10-04 Antony

你需要什么？在中心轴上动画？ –

@Marcos一个粉丝动画..红色箭头是风扇叶片。 – Antony

是这样的吗？我只是更改了.windmill规则的transform-origin。

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

来源

2015-10-04 18:49:35 Dinei

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

我使用了不同的图像，因为他们面临着错误的方向。为此，箭头必须面向旋转原点，在本例中为0 0或左上角。

为了浓缩答案，我删除了所有供应商前缀和转换中的淡入淡出。

#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); } 
 
}

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

来源

2015-10-04 19:29:46 jaunt

CSS粉丝动画

回答

相关问题