html5 - Cara menulis kesan penyebaran kelopak dan cara menghasilkan banyak kelopak
我想大声告诉你
我想大声告诉你 2017-06-22 11:53:27
0
3
2000
.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

我想大声告诉你
我想大声告诉你

membalas semua (3)
伊谢尔伦

Hanya cari beberapa gambar kelopak dan gunakan js untuk mengawal putaran pada sudut yang berbeza

    过去多啦不再A梦

    layabox, phaser, kesan zarah

      小葫芦

      Berbilang gambar kelopak, gunakan js untuk menjana kedudukan kelopak dan putaran kelopak secara rawak dan pilih gambar kelopak.

        Muat turun terkini
        Lagi>
        kesan web
        Kod sumber laman web
        Bahan laman web
        Templat hujung hadapan
        Tentang kita Penafian Sitemap
        Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!