.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
找几张花瓣的图片,js控制旋转不同的角度不就好了
layabox,phaser,粒子效果
多张花瓣的图片,用js随机生成花瓣的位置和花瓣的旋转和选择花瓣的图片。