In diesem Artikel wird die Verwendung von reinem CSS zur Implementierung des qqlogo-Bildcodes vorgestellt
<!doctype html> <html> <head> <title>CSS3logo</title> <style type="text/css"> html, body, div, img { margin: 0; padding: 0; } #box { position: absolute; left: 0; top: 0; } #head { position: absolute; left: 135px; top: 10px; background: #121214; width: 127px; height: 134px; border-radius: 50%/49%; z-index: 1; } #body { position: absolute; left: 128px; top: 68px; background: #121214; width: 141px; height: 138px; border-radius: 50%; } #belly { position: absolute; left: 144px; top: 79px; background: #fbfbfb; width: 110px; height: 123px; border-radius: 50%; } .foot { position: absolute; top: 186px; background: #febf18; width: 63px; height: 30px; border-radius: 50%; box-shadow: 0 3px #dc9111; z-index: -1; } #leftFoot { left: 132px; transform: rotate(-3deg); } #rightFoot { left: 202px; transform: rotate(3deg); } .eye { position: absolute; top: 44px; width: 24px; height: 35px; background: #fff; border-radius: 50%; z-index: 2; } #leftEye { left: 170px; } #rightEye { left: 203px; } #leftEyeBall { position: absolute; left: 180px; top: 53px; width: 6px; height: 14px; border-radius: 50%; background: #171718; border: solid 2px #040305; z-index: 2; } #leftEyeBall > div { position: absolute; left: 2px; top: 1px; width: 3px; height: 7px; border-radius: 50%; background: #fff; } #rightEyeBall { position: absolute; left: 206px; top: 53px; width: 13px; height: 13px; overflow: hidden; z-index: 2; } #rightEyeBall > div { width: 7px; height: 14px; border-radius: 50%; border: solid 3px #040305; } .hand { position: absolute; top: 130px; width: 70px; height: 23px; border-radius: 50%; background: #121214; } #leftHand { left: 91px; transform: rotate(-70deg); } #rightHand { left: 235px; transform: rotate(70deg); } #scarf { position: absolute; left: 123px; top: 89px; width: 148px; height: 55px; z-index: 2; border: solid 1px transparent; overflow: hidden; } #scarf1 { position: absolute; left: 152px; top: 117px; width: 27px; height: 50px; z-index: 2; background: #e32a0e; border-bottom-right-radius: 5px; border-bottom-left-radius: 6px; transform: skewY(8deg) rotate(2deg); } #scarf > #circle { position: absolute; left: -40px; top: -233px; width: 186px; height: 243px; border-radius: 50%; border: solid 22px #e32a0e; } #scarf > .clip { position: absolute; top: -30px; width: 20px; height: 55px; background: #fff; } #leftClip { left: -7px; transform: rotate(20deg); } #rightClip { left: 136px; transform: rotate(-20deg); } #mouth { position: absolute; left: 157px; top: 84px; width: 83px; height: 22px; border-radius: 50%; background: #fdbe18; z-index: 2; } #mouth > #m_child_0 { margin: 0 auto; width: 76px; height: 24px; border-radius: 50%; background: #fdbe18; } #mouth #m_child_1 { margin: 0 auto; width: 60px; height: 27px; border-radius: 50%; background: #fdbe18; } #mouth #m_child_2 { margin: 0 auto; width: 50px; height: 29px; border-radius: 50%; background: #fdbe18; } #mouth #m_child_3 { position: absolute; left: 9px; top: 2px; width: 66px; height: 20px; overflow: hidden; border-radius: 50%; } #mouth #m_child_4 { position: absolute; left: -1px; top: -9px; width: 68px; height: 26px; border-radius: 50%; box-shadow: 0px 1px 1px #8f3201; background: #fdbe18; } #mouth #m_child_5 { position: absolute; left: 21px; top: 2px; width: 42px; height: 22px; border-radius: 50%; background: #8f3201; } #mouth #m_child_6 { margin: 1px auto; width: 30px; height: 23px; border-radius: 50%; background: #8f3201; } </style> </head> <body> <div id="box"> <div id="head"></div> <div id="body"></div> <div id="belly"></div> <div id="leftFoot" class="foot"></div> <div id="rightFoot" class="foot"></div> <div id="leftEye" class="eye"></div> <div id="rightEye" class="eye"></div> <div id="leftEyeBall"><div></div></div> <div id="rightEyeBall"><div></div></div> <div id="leftHand" class="hand"></div> <div id="rightHand" class="hand"></div> <div id="scarf"> <div id="circle"></div> <div id="leftClip" class="clip"></div> <div id="rightClip" class="clip"></div> </div> <div id="scarf1"></div> <div id="mouth"> <div id="m_child_0"> <div id="m_child_1"> <div id="m_child_2"></div> </div> </div> <div id="m_child_5"> <div id="m_child_6"></div> </div> <div id="m_child_3"> <div id="m_child_4"></div> </div> </div> </div> </body> </html> QQlogo
Das obige ist der detaillierte Inhalt vonVerwenden Sie reines CSS, um den qqlogo-Bildcode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!