.swiper-wrapper .swiper-slide:nth-of-type(1) { background: url("../img/p1_bg.jpg"); background-size: 100% 100%; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(1){ position: absolute; top: 35%; left: 4%; animation: rotate_flower1 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(2){ position: absolute; top: 23%; left: 45%; animation: rotate_flower2 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(3){ position: absolute; top: 32%; left: 33%; animation: rotate_flower2 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(4){ position: absolute; top: 46%; left: 43%; animation: rotate_flower3 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(5){ position: absolute; top: 38%; left: 77%; animation: rotate_flower2 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(6){ position: absolute; top: 31%; left: 48%; animation: rotate_flower1 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(7){ position: absolute; top: 26%; left: 28%; animation: rotate_flower3 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(8){ position: absolute; top: 35%; left: 67%; animation: rotate_flower3 4s linear infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(9){ position: absolute; top: 25%; left: 89%; animation: rotate_flower2 4s cubic-bezier(.2,0,.1,0) infinite; } .swiper-wrapper .swiper-slide:nth-of-type(1) img:nth-child(10){ position: absolute; top: 33%; left: 75%; animation: rotate_flower1 4s linear infinite; } @keyframes rotate_flower1{ to{ transform: rotate(359deg); top: 78%; } } @keyframes rotate_flower2{ to{ transform: rotate(359deg); top: 92%; } } @keyframes rotate_flower3{ to{ transform: rotate(359deg); top: 86%; opacity: 0; } }
Saya menulis satu persatu sekarang
Sangat mengecewakan
Dan tidak mungkin banyak kelopak boleh dijana tanpa terhingga apabila hanya ada sedikit boleh dicapai tanpa kanvas? kanvas
Hanya cari beberapa gambar kelopak dan gunakan js untuk mengawal putaran pada sudut yang berbeza
layabox, phaser, kesan zarah
Berbilang gambar kelopak, gunakan js untuk menjana kedudukan kelopak dan putaran kelopak secara rawak dan pilih gambar kelopak.