<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- html5 必须的属性 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>皮卡丘</title> <link rel="stylesheet" href="Style.css"> </head> <body> <div class="warpper"> <div class="nose"></div> <div class="eye left"></div> <div class="eye right"></div> <div class="face left"></div> <div class="face right"></div> <div class="upperLip left"></div> <div class="upperLip right"></div> <div class="lowerLip-wrapper"> <div class="lowerLip"></div> </div> </div> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } *::after { box-sizing: border-box; } *::before { box-sizing: border-box; } body { height: 100vh; border: 1px solid green; display: flex; justify-content: center; align-items: center; background: #fee433; } .warpper { width: 100%; height: 165px; position: relative; /*border: 1px solid red;*/ } /*画鼻子*/ .nose { width: 0; height: 0; border-style: solid; border-width: 12px; border-color: black transparent transparent; border-radius: 11px; position: absolute; left: 50%; top: 28px; margin-left: -12px; } /*画眼睛*/ .eye { width: 49px; height: 49px; background: #2e2e2e; position: absolute; border-radius: 50%; border: 2px solid #000000; } .eye::before { content: ''; display: block; width: 24px; height: 24px; background: white; position: absolute; border-radius: 50%; left: 6px; top: -1px; border: 2px solid #000; } .eye.left { right: 50%; margin-right: 90px; } .eye.right { left: 50%; margin-left: 90px; } /*画脸*/ .face { width: 68px; height: 68px; background: #fc0d1c; border-radius: 50px; position: absolute; top: 85px; } .face.left { right: 50%; margin-right: 116px; } .face.right { left: 50%; margin-left: 116px; } /*画胡子*/ .upperLip { height: 25px; width: 80px; border: 2px solid black; position: absolute; top: 50px; background-color: #fde348; } .upperLip.left { right: 50%; border-bottom-left-radius: 40px 25px; border-top: none; border-right: none; transform: rotate(-20deg); } .upperLip.right { left: 50%; border-bottom-right-radius: 40px 25px; border-top: none; border-left: none; transform: rotate(20deg); } /*画嘴巴*/ .lowerLip-wrapper { bottom: 0; position: absolute; left: 50%; margin-left: -150px; z-index: -1; height: 110px; overflow: hidden; width: 300px; } .lowerLip { height: 3500px; width: 300px; background: #990513; border-radius: 200px/2000px; border: 2px solid black; position: absolute; bottom: 0; overflow: hidden; } /*画舌头*/ .lowerLip::after { content: ''; position: absolute; bottom: -20px; width: 100px; height: 100px; background: #fc4a62; left: 50%; margin-left: -50px; border-radius: 50px; }
