文章詳情頁
css3怎么能做到弧形的運動軌跡
瀏覽：146日期：2023-06-15 11:36:07
問題描述
因為想做花瓣掉落的逼真樣子 現在只是在中間點加上了一個斷點 但是運動的非常生硬怎么能用css3 keyfames 做出那種弧形的運動軌跡 得到幫助非常感謝
問題解答
回答1：應該能，不過需要計算下，變化的參數
回答2：我做過一個金幣掉落的效果我的動畫這么寫的
@keyframes drop 0% transform: translate(0,0) rotate3d(0,1,0,0deg) 33% transform: translate(-20px,245px) rotate3d(0,1,0,-60deg) 66% transform: translate(20px,490px) rotate3d(0,1,0,60deg) 100% transform: translate(0,736px) rotate3d(0,1,0,0deg) @keyframes drop2 0% transform: translate(0,0) rotate3d(1,0,0,0deg) 33% transform: translate(20px,245px) rotate3d(1,0,0,60deg) 66% transform: translate(-20px,490px) rotate3d(1,0,0,-60deg) 100% transform: translate(0,736px) rotate3d(1,0,0,0deg)回答3：
曲線的時間參數，橫著勻速，豎著變速。或者反過來，能模擬出曲線時間參數
標簽：
CSS
相關文章：
1. javascript - sublime快鍵鍵問題2. javascript - 移動端上不能實現拖拽布局嗎？3. boot2docker無法啟動4. node.js - 安裝cordova時報錯，怎么解決？5. angular.js - 單頁應用（ng/vue）該如何監聽用戶離開當前頁面（或者路由）？6. 前端 - 這段代碼一直生效不了，查半天因為 top: 0px; 分號后一個隱藏的東西，也不是占位符...刪了就可以生效，這是什么情況。。7. nginx bind failed8. javascript - 如何判斷不同兩個對象觸發同一事件？9. javascript - react native在run-android時出現這個錯誤該怎么解決？大神賜教10. thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙
排行榜
網公網安備