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

我现在是一个一个写的
很挫啊
而且不能有很多花瓣 很多花瓣是怎么在只有几个的情况下无限生成 不用canvas能实现么
或者 用canvas怎么实现呢