1. 首頁 > 生活百科 > >

手把手帶你使用CSS繪制一個可愛卡通獅子動畫( 二 )

小知識it知識



眨眼睛
眼睛一眨一眨會顯得獅子會更生動，但是如果通過縮小高度做動畫實現的畫，會顯得非常難看因為連眼白眼珠都會壓縮變形 。 所以我們依然是通過 clip-path 屬性，利用 ellipse 方法把裁剪范圍從頂部和底部往中間延伸，直至2%留一道縫隙即可 。
.eye { // ... animation: 4s blinking infinite forwards; overflow: hidden;}@keyframes blinking { 0%, 40%, 80% { clip-path: ellipse(100% 100% at 50% 48%); } 60%, 100% { clip-path: ellipse(100% 2% at 50% 48%); }}

手把手帶你使用CSS繪制一個可愛卡通獅子動畫

文章插圖

看簡簡單單的幾段css代碼就讓一只靈動乖巧的獅子就坐在你的面前，趕緊嘗試一下吧~
（學習視頻分享：web前端）
以上就是手把手帶你使用CSS繪制一個可愛卡通獅子動畫的詳細內容，更多請關注電腦自學網其它相關文章！
【手把手帶你使用CSS繪制一個可愛卡通獅子動畫】

推薦閱讀