html5 - 花瓣散落效果怎么寫 怎么生成好多花瓣
問題描述
.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怎么實現呢
問題解答
回答1:找幾張花瓣的圖片,js控制旋轉不同的角度不就好了
回答2:layabox,phaser,粒子效果
回答3:多張花瓣的圖片,用js隨機生成花瓣的位置和花瓣的旋轉和選擇花瓣的圖片。
相關文章:
1. javascript - 求幫助 , ATOM不顯示界面!!!!2. 解決Android webview設置cookie和cookie丟失的問題3. javascript - nodejs使用mongoose連接數據庫,使用post提交表單在后臺,后臺處理后調用res.redirect()跳轉界面無效?4. html5 - HTML代碼中的文字亂碼是怎么回事?5. javascript - 能否讓vue-cli的express修改express重啟服務6. python bottle跑起來以后,定時執行的任務為什么每次都重復(多)執行一次?7. node.js - mac安裝mongodb第一次啟動失敗8. node.js - npm一直提示proxy有問題9. javascript - vue2.0中,$refs對象為什么用駝峰的方式獲取不到屬性?10. java - 注解上的屬性可以傳遞嗎?
