HTML+CSS+JS实现 ❤️卡通足球人物梅西ui特效❤️

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

主要代码实现：

CSS样式：

html,
body {background: #fabf54;
}.cartoon {position: absolute;bottom: 0%;left: 50%;transform: translate(-50%, 0%);width: 90vmin;height: 90vmin;
}.cartoon div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CodePen - CSS Messi</title><meta name="monetization" content="$ilp.uphold.com/WUdKN2pAgLAG" /><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/style.css"></head><body><div class="cartoon"><div class="head"><div class="front-light"></div><div class="back-light"></div><div class="ear"></div><div class="cheek"></div><div class="nose"></div><div class="bear-shadow"></div></div><div class="beard"><div class="bear-shadow"></div></div><div class="hair"><div class="hair-dark"></div></div><div class="body"><div class="body-light"></div><div class="body-dark"></div><div class="shorts"><div class="shorts-lines"></div><div class="shorts-lines-dark"></div><div class="shorts-red"></div></div><div class="body-line body-line-1"></div><div class="body-line body-line-2"></div><div class="body-line body-line-3"></div><div class="body-line body-line-4"></div><div class="body-line body-line-5"></div><div class="body-dark-line body-dark-line-1"></div><div class="body-dark-line body-dark-line-2"></div></div><div class="jersey"><div class="red red-1"></div><div class="red red-2"></div><div class="red red-3"></div><div class="dark-blue"></div><div class="bright-red"></div><div class="yellow yellow-1"></div><div class="yellow yellow-2"></div><div class="yellow yellow-3"></div><div class="zero"></div><div class="light-top"></div><div class="jersey-shadow"></div></div><div class="hand-1"><div class="hand-1-shadow"></div></div><div class="body-top"><div class="body"><div class="body-light"></div><div class="body-dark"></div></div></div><div class="hand-2"><div class="hand-2-shadow"></div></div></div></body></html>