div布局实现一个人物形象效果代码
代码语言:html
所属分类:布局界面
代码描述:div布局实现一个人物形象效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { overflow: hidden; background: #ceeeef; } .cartoon { position: absolute; bottom: 0%; left: 50%; transform: translate(-50%, 0%); width: 90vmin; height: 90vmin; } .cartoon div { position: absolute; box-sizing: border-box; } .b { border: 0.5vmin solid; } .r { border-radius: 100%; } .hb::before, .ha::after { content: ""; display: block; position: absolute; box-sizing: border-box; } /****/ .cartoon { --skin: #fca; --dark: #da9; --semidark: #eba; --semilight: #fdb; --iris: #89b; --hair: #963; --shirt: #fff; --shirt-back: #ddd; } .face { background: var(--skin); width: 35%; height: 52%; border-radius: 100% / 30% 30% 120% 120%; clip-path: polygon(-100% -100%, 200% -100%, 200% 99%, 60% 98.25%, 50% 98.5%, 40% 98.25%, -100% 99%); top: 3%; left: 50%; transform: translate(-50%, 0); overflow: hidden; box-shadow: inset -0.5vmin 0 1vmin var(--semidark), inset 0.5vmin 0 1vmin var(--semilight), -5vmin -6vmin 0 -4vmin var(--hair), 5vmin -5.5vmin 0 -4vmin var(--hair), 0 7vmin 4vmin -8vmin var(--dark); } .eye { width: 8.5vmin; height: 4.5vmin; background: #fffcf8; color: var(--dark); top: 29%; left: 10%; border-radius: 100% / 190% 140% 70% 60%; overflow: hidden; box-shadow: 0 0.5vmin 0 -0.25vmin, 0 -0.75vmin 0 -0.25vmin, 0 -2vmin 2vmin 1vmin #da9a, 0 0 3vmin 1vmin #da9a, 2vmin 0.5vmin 0 -1.5vmin, -2vmin 0.75vmin 0 -1.5vmin; } .eye::before { width: 1.5vmin; height: 1.5vmin; border-radius: 50%; background: #fff; top: 50%; left: 50%; transform: translate(-50%, -25%); box-shadow: inset 0.5vmin -0.5vmin 0 0.5vmin #222, 0.9vmin -0.5vmin 0 -0.6vmin white, 0 0 1.5vmin #fffa, 0 0 0 1.5vmin var(--iris); } .eye::after { width: 200%; height: 15%; top: 0; left: -50%; background: var(--skin); box-shadow: inset 0 0 0 3vmin #00000008; transform: rotate(-3deg); } .eye + .eye { left: 64%; border-radius: 100% / 130% 190% 60% 70%; box-shadow: 0 0.5vmin 0 -0.25vmin, 0 -0.75vmin 0 -0.25vmin, 0 -2vmin 2vmin 1vmin #da9a, 0 0 3vmin 1vmin #da9a, -2vmin 0.5vmin 0 -1.5vmin, 2vmin 0.75vmin 0 -1.5vmin } .eye + .eye::after { transform: rotate(2deg); } .mouth { width: 38%; height: 5%; background: var(--dark); border-radius: 100% / 0 0 180% 200%; top: 75%; left: 50%; transform: translate(-50%, 0); opacity: 0.5; background-image: repeating-linear-gradient(to right, transparent 0 1%, #00000008 0 2%); } .mouth-top { width: 21%; height: 2.5%; top: 73%; left: 31%; background: var(--dark); border-radius: 100% 40% 0 0; } .mouth-top::after { width: 100%; height: 100%; background: var(--dark); border-radius: 40% 100% 0 0; right: -85%; } .chin { width: 50%; height: 45%; top: 62%; box-shadow: inset 0 1vmin 3vmin var(--dark), 12.5vmin -4vmin 2vmin -3vmin var(--semidark), -12.5vmin -4vmin 2vmin -3vmin var(--semidark); left: 50%; transform: translate(-50%, 0); opacity: 0.25; } .chin::after { width: 70%; height: 10vmin; border-radius: 50%; top: 53%; left: 50%; transform: translate(-50%, 0); box-shadow: 0 -2vmin 1vmin -1vmin var(--dark); } .nose { width: 18%; height: 43.5%; border-radius: 100% / 120% 120% 50% 50%; top: 22%; left: 50%; transform: translate(-50%, 0); box-shadow: inset -0.25vmin -1.75vmin 0.75vmin -1vmin var(--dark), 2vmin 0vmin 0.5vmin -1.75vmin var(--semidark), inset 2vmin -2vmin 1vmin -2.25vmin var(--semilight); } .nostril { width: 3vmin; height: 3vmin; top: 57.5%; left: 36.5%; box-shadow: inset 0.5vmin -0.75vmin 0.5vmin -0.5vmin var(--dark); } .nostril::after { width: 100%; height: 100%; border-radius: 50%; left: 5.25vmin; box-shadow: inset -0.5vmin -0.75vmin 0.5vmin -0.5vmin var(--dark); } .eyebrow { width: 42%; height: 10%; border-radius: 100% 80% 0 0; top: 24%; box-shadow: 1vmin -1.6vmin 0 -1vmin var(--hair); transform: rotate(-8deg); } .eyebrow + .eyebrow { width: 43%; left: 56%; top: 24.25%; border-radius: 75% 100% 0 0; box-shadow: -1vmin -1.7vmin 0 -1vmin var(--hair); transform: rotate(7deg); } .ear { width: 5%; height: 22%; background: var(--skin); border-radius: 100% / 50% 50% 50% 100%; box-shadow: inset 0 0 2vmin var(--dark), inset -2vmin 0 2vmin var(--semidark); top: 17%; left: 30%; transform: rotate(-9deg); } .ear + .ear { border-radius: 100% / 50% 50% 100% 50%; transform: rotate(7deg); box-shadow: inset 0 0 2vmin var(--dark), inset 2vmin 0 2vmin var(--semidark); left: 65.125%; } .mullet { width: 40%; height: 52%; left: 50%; top: -2%; background: var(--hair); transform: translate(-50%, 0); border-radius: 100% / 30% 50% 90% 95%; } .hair-1 { width: 5%; height: 18%; background: var(--hair); border-radius: 45% 45% 40% 45%; left: 28%; top: 3%; box-shadow: 34vmin 0 var(--hair) } .neck { left: 50%; top: 40%; transform: translate(-50%, 0); width: 23.5%; height: 29%; background: var(--skin); box-shadow: inset 0.75vmin 0 2vmin -1.25vmin var(--semidark), inset -0.75vmin 0 2vmin -1.25vmin var(--s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0