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

回答

相關問題