html5 - 花瓣散落效果怎么写 怎么生成好多花瓣
我想大声告诉你-06-22 11:53:27 0 3 471
.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怎么实现呢
回答
3
0
分享
全部回复 (3)
伊谢尔伦-06-22 11:55:273楼
找几张花瓣的图片，js控制旋转不同的角度不就好了
回复
过去多啦不再A梦-06-22 11:55:272楼
layabox,phaser,粒子效果
回复
小葫芦-06-22 11:55:271楼
多张花瓣的图片，用js随机生成花瓣的位置和花瓣的旋转和选择花瓣的图片。
回复
