html5 – Wie man den Blütenblatt-Streuungseffekt schreibt und wie man viele Blütenblätter erzeugt
我想大声告诉你
我想大声告诉你 2017-06-22 11:53:27
0
3
1989
.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; } }

Ich schreibe jetzt eins nach dem anderen
Es ist sehr frustrierend
Und es kann nicht unendlich viele Blütenblätter erzeugen, wenn es nur wenige sind. Oder wie kann es mit erreicht werden? Leinwand

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

Antworte allen (3)
伊谢尔伦

找几张花瓣的图片,js控制旋转不同的角度不就好了

    过去多啦不再A梦

    layabox,phaser,粒子效果

      小葫芦

      多张花瓣的图片,用js随机生成花瓣的位置和花瓣的旋转和选择花瓣的图片。

        Neueste Downloads
        Mehr>
        Web-Effekte
        Quellcode der Website
        Website-Materialien
        Frontend-Vorlage
        Über uns Haftungsausschluss Sitemap
        Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!