html5 - 花瓣散落效果怎么寫 怎么生成好多花瓣
問(wèn)題描述
.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; }}
我現(xiàn)在是一個(gè)一個(gè)寫的 很挫啊而且不能有很多花瓣 很多花瓣是怎么在只有幾個(gè)的情況下無(wú)限生成 不用canvas能實(shí)現(xiàn)么或者 用canvas怎么實(shí)現(xiàn)呢
問(wèn)題解答
回答1：找?guī)讖埢ò甑膱D片，js控制旋轉(zhuǎn)不同的角度不就好了
回答2：layabox,phaser,粒子效果
回答3：多張花瓣的圖片，用js隨機(jī)生成花瓣的位置和花瓣的旋轉(zhuǎn)和選擇花瓣的圖片。
相關(guān)文章：
1. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？2. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項(xiàng)3. html按鍵開(kāi)關(guān)如何提交我想需要的值到數(shù)據(jù)庫(kù)4. css - width設(shè)置為100%之后列表無(wú)法居中5. ios - vue－cli開(kāi)發(fā)項(xiàng)目webstrom會(huì)在stylus樣式報(bào)錯(cuò)，飆紅，請(qǐng)大神幫忙6. css3 - 怎么感覺(jué)用 rem 開(kāi)發(fā)的不多啊7. python - 在pyqt中做微信的機(jī)器人,要在表格中顯示微信好友的名字,卻顯示不出來(lái),怎么解決?8. html5 - 用Egret寫的小游戲，怎么分享到微信呢？9. javascript - 一個(gè)頁(yè)面有四個(gè)圖片，翻頁(yè)的時(shí)候想固定住某個(gè)圖片然后翻頁(yè)，如何實(shí)現(xiàn)呢?10. objective-c - 自定義導(dǎo)航條為類似美團(tuán)的搜索欄樣式
網(wǎng)公網(wǎng)安備