CSS3動(dòng)畫人物畫是一種非常有趣和有創(chuàng)意的藝術(shù)表現(xiàn)形式,它結(jié)合了CSS3動(dòng)畫和簡筆畫的技巧,可以制作出非常生動(dòng)和富有表現(xiàn)力的動(dòng)畫。
下面是一個(gè)簡單的CSS3動(dòng)畫人物畫的例子:
.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); } }
這段代碼可以實(shí)現(xiàn)一個(gè)粉色的小人物,它會在屏幕上跳動(dòng)。我們可以通過修改不同的CSS屬性,并結(jié)合不同的CSS3動(dòng)畫技巧,來創(chuàng)作出各種不同的可愛的人物畫。