css+svg實現支付寶小雞吃米

時間 2019-11-16

標籤 css+svg css svg 實現支付寶小雞欄目 CSS 简体版

原文原文鏈接

使用css+svg實現支付寶小雞吃米

效果圖：
css

實現一部分場景與動畫，剩下得有時間繼續完善vue

主要使用svg畫不規則物體，連體山脈與草叢背景都是使用svg一筆畫出，路徑畫法參考
SVG矢量繪圖 path路徑詳解（貝塞爾曲線, 曲線, 平滑直線及弧形）css3

剩下大部分都是由div+css製做完成，不規則圓形等使用border-radius,不規則四邊形使用transform：skew()屬性變換，動畫使用@keyframes 定義位置動畫git

github:github地址
動畫展現：小雞吃米github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。