css绘制一个熊猫宝宝效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个熊猫宝宝效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { height: 100%; background-size: cover; background-repeat: no-repeat; width: 100%; } .container { position: relative; margin: auto; height: 400px; width: 600px; background: none; margin-top: 25%; } .head { position: absolute; height: 30%; width: 24%; top: 25%; left: 37.5%; border-radius: 40%; border-top-left-radius: 50%; border-top-right-radius: 50%; z-index:0; background: white; border: 1px solid black; } /*Nose*/ .nose { position: absolute; border: 1px solid black; height: 3.5%; width: 4%; top: 42.5%; left: 47.5%; border-radius: 40%; border-top-left-radius: 50%; border-top-right-radius: 50%; background: black; } .noseglare { position: absolute; height: 1%; width: 1.5%; top: 43%; left: 49.1%; border-radius: 50%; background: white; } /*Left Eye */ .outer-eye-left { position: absolute; border: 1px solid black; height: 16%; width: 10%; top: 30%; left: 39%; border-top-left-radius: 55%; border-top-right-radius:50%; border-bottom-right-radius: 65%; border-bottom-left-radius: 40%; background: black; z-index: 4; } .inner-eye-left { position: absolute; height: 30px; width: 30px; top: 34%; left: 42%; border-radius: 50%; z-index: 5; background: white; } .eye-left-pupil { position: absolute; border: 1px solid black; height: 20px; width: 20px; top: 35%; left: 42.7%; border-radius: 50%; z-index: 6; background: black; } .left-eyedot1 { z-index: 7; position: absolute; height: 10px; width: 10px; top: 35.5%; left: 43%; border-radius: 50%; background: white; } .left-eyedot2 { z-index: 7; position: absolute; height: 4px; width: 4px; left: 44.3%; top: 38.5%; border-radius: 50%; background: white; } /*Right Eye*/ .outer-eye-right { position: absolute; border: 1px solid black; height: 16%; width: 9%; top: 30%; left: 50%; border-top-left-radius: 55%; border-top-right-radius:50%; border-bottom-right-radius: 65%; border-bottom-left-radius: 90%; background: black; z-index: 4; } .inner-eye-right { position: absolute; height: 30px; width: 30px; top: 34%; left: 51.5%; border-radius: 50%; background:white; z-index: 5; } .eye-right-pupil { position: absolute; border: 1px solid black; height: 20px; width: 20px; top: 35.2%; left: 52.4%; background: black; z-index: 6; border-radius: 50%; } .right-eyedot1 { z-index: 7; position: absolute; height: 10px; width:10px; top: 35.5%; left: 52.6%; border-radius: 50%; background: white; } .right-eyedot2 { position: absolute; height: 6px; width: 6px; top: 38.2%; left: 53.56%; border-radius: 50%; background: white; z-index: 7; } /*Mouth & Tongue */ .mouth { position: absolute; border: 1px solid black; height: 5.5%; width: 7.55%; top: 48%; left: 45.56%; background: black; z-index: 10; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .tongue { position: absolute; height: 2.5%; width: 5%; top: 51%; left: 47%; border-top-left-radius: 50%; border-top-right-radius:50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; background: red; z-index: 11; } /*Body*/ .body { position: absolute; border: 1px solid black; height: 38%; width: 27.59%; top: 48%; left: 35.5%; border-top-left-radius: 10%; border-top-right-radius:10%; background: black; z-index:-1; } .body-secondary { position: absolute; border: 1px solid black; height: 30%; width: 25%; top: 58%; left: 37%; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius:45%; border-bottom-right-radius: 45%; background: white; z-index: 4; } /*Arms*/ .arm-left { position: absolute; border: 1px solid black; height: 12.5%; width: 13%; top: 51.4%; left: 27%; transform: rotate(-23deg); border-top-left-radius: 50%; border-bottom-left-radius: 50%; background: black; z-index: 4; } .arm-right { position: absolute; border: 1px solid black; height: 12.5%; width: 13%; top: 51.2%; left: 58.5%; transform: rotate(200deg); border-top-left-radius: 50%; border-bottom-left-radius: 50%; background: black; z-index: 4; } /*Left Foot & Paw Print*/ .outer-foot-left { position: absolute; border: 1px solid black; height: 87px; width:87px; top: 68.5%; left: 31.7%; border-radius: 50%; backgroun.........完整代码请登录后点击上方下载按钮下载查看
网友评论0