Effect demonstration: home page source code

​

Main code implementation:

CSS styles:

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;
}
Copy the code

HTML code:

<! 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>Copy the code