.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;
}
}
I am writing one by one now
It’s very frustrating
And there can’t be many petals. How can infinitely many petals be generated when there are only a few? Can it be achieved without canvas?
Or how can it be achieved with canvas? Woolen cloth
Just find some pictures of petals and use js to control the rotation to different angles
layabox, phaser, particle effect
Multiple petal pictures, use js to randomly generate petal positions and petal rotation and select petal pictures.