html5 - Comment écrire l'effet de diffusion des pétales et comment générer plusieurs pétales

Question

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

J'écris un par un maintenant
C'est très frustrant
Et il ne peut pas y avoir beaucoup de pétales. Comment peut-on générer plusieurs pétales à l'infini alors qu'il n'y en a que quelques-uns ? Peut-on y parvenir sans toile ? toile

Answer 1

Trouvez simplement quelques photos de pétales et utilisez js pour contrôler la rotation sous différents angles

Answer 2

layabox, phaser, effet particule

Answer 3

Plusieurs images de pétales, utilisez js pour générer de manière aléatoire la position et la rotation des pétales et sélectionner l'image du pétale.