CSS3動畫人物畫是一種非常有趣和有創意的藝術表現形式,它結合了CSS3動畫和簡筆畫的技巧,可以制作出非常生動和富有表現力的動畫。
下面是一個簡單的CSS3動畫人物畫的例子:
.body { position: relative; width: 200px; height: 300px; margin: 0 auto; animation: bounce 1s ease-in-out; } .head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; background: #FFC0CB; } .eye { position: absolute; top: 25%; left: 25%; width: 10px; height: 10px; border-radius: 50%; background-color: #000; } .right-eye { left: 50%; } .nose { position: absolute; top: 35%; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50% 50% 0 50%; background-color: #FFC0CB; } .mouth { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 30px; height: 15px; border-radius: 0 0 50% 50%; background-color: #000; } .body:before { content: ""; position: absolute; top: 50%; left: -10px; width: 20px; height: 100%; background-color: #FFC0CB; transform: skewX(30deg); transform-origin: bottom left; } .body:after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 100%; background-color: #FFC0CB; transform: skewX(-30deg); transform-origin: bottom right; } @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } }
這段代碼可以實現一個粉色的小人物,它會在屏幕上跳動。我們可以通過修改不同的CSS屬性,并結合不同的CSS3動畫技巧,來創作出各種不同的可愛的人物畫。
上一篇mysql查詢當日