Hoạt ảnh của người hâm mộ CSS

Question

Tôi có ba hình ảnh khác nhau mà tôi muốn áp dụng quạt như hoạt ảnh.

Tôi không thể kết nối hình ảnh trong Photoshop vì tôi muốn hình ảnh xuất hiện sau hình ảnh kia.

Đây là mã (Tôi đã sử dụng hình ảnh giả trong mã)

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

Đây là fiddle: http://jsfiddle.net/wzht89r3/2/

Giải pháp cũng có thể là trong jquery hoặc javascript.

Answer 1

Một cái gì đó như thế này? Tôi vừa thay đổi số transform-origin của quy tắc .windmill của bạn.

.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

Cá nhân tôi sẽ thoát khỏi những lớp học bổ sung và sử dụng :nth-child pseudo class. Có mỗi đứa trẻ với bù đắp riêng của nó (ví dụ: top:150px; left:135px;) có nghĩa là bạn sẽ phải tính toán lại vị trí mỗi khi bạn thay đổi hình ảnh, vì vậy tôi đã xóa chúng và tìm một cách định vị khác.

Tôi đã sử dụng các hình ảnh khác nhau khi chúng hướng về sai hướng. Để làm việc này, mũi tên phải đối diện với nguồn gốc xoay vòng, trong trường hợp này là 0 0 hoặc trên cùng bên trái.

Để ngưng tụ câu trả lời, tôi đã xóa tất cả tiền tố của nhà cung cấp và mờ dần trong quá trình chuyển đổi.

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