css布局绘制一个朴素辛苦农民形象代码
代码语言:html
所属分类:布局界面
代码描述:css布局绘制一个朴素辛苦农民形象代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .cartoon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80vmin; height: 80vmin; } .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; } /****/ html, body { overflow: hidden; background: #e8eeff; } .cartoon { --belt: #963; --hair: #531; --skin: #fca; --shirt: #ddc; } .head, .beard { top: 10%; left: 50%; transform: translate(-50%, 0); width: 55%; height: 35%; background-color: var(--skin); border-radius: 5% / 100% 100% 10% 10%; background-image: linear-gradient(transparent 80%, rgba(0,0,0,0.075) 0); } .beard { background: transparent; top: 75%; border-radius: 100% / 120% 120% 75% 75% ; box-shadow: inset 0 -1vmin 0 4vmin var(--hair); } .eye { width: 2vmin; height: 2vmin; background: white; border-radius: 50%; top: 42%; left: 27.25%; box-shadow: 2vmin 1vmin 0 2vmin black, 2vmin 1vmin 0 4vmin white, 14vmin 0 white, 16vmin 1vmin 0 2vmin black, 16vmin 1vmin 0 4vmin white, 2.5vmin 1vmin 0 6vmin var(--skin), 2vmin -3vmin 0 4vmin rgba(0,0,0,0.35), 2vmin -3vmin 0 4vmin var(--hair), 16.5vmin 1vmin 0 6vmin var(--skin), 17vmin -3vmin 0 4vmin rgba(0,0,0,0.35), 17vmin -3vmin 0 4vmin var(--hair); } @keyframes blink { 0%, 3%, 100% { background-position: 0% -11vmin, 0% 11vmin; } 1.5% { background-position: 0% -3.5vmin, 0% 7.5vmin; } } .eyelid { width: 11vmin; height: 11vmin; top: 30%; left: 22%; overflow: hidden; background-image: linear-gradient(var(--skin), var(--skin)), linear-gradient(var(--skin), var(--skin)); background-size: 11vmin 11vmin; background-repeat: no-repeat; background-position: 0% -11vmin, 0% 11vmin; animation: blink 12s linear infinite; } .eyelid + .eyelid { left: 54%; } .nose { width: 5vmin; height: 10vmin; background: var(--skin); border-radius: 100% / 120% 120% 80% 80%; left: 50%; top: 45%; transform: translate(-50%, 0); background-image: linear-gradient(transparent 60%, rgba(255,0,0,0.2)); } .nose::before, .nose::after { width: 2vmin; height: 2vmin; background: var(--skin); border-radius: 50%; top: 75%; left: -15%; background-image: linear-gradient(transparent -15%, rgba(255,0,0,0.2) 120%); } .nose::after { right: -15%; left: auto; } .hair-top { width: 70%; height: 40%; background: var(--hair); border-radius: 20% / 70% 0 50% 0; transform: skew(-10deg); top: -15%; left: -5%; } .lip { width: 8vmin; height: 1.5vmin; background: #fa8; border-radius: 70% 70% 2vmin 2vmin; top: 85.5%; left: 50%; transform: translate(-50%, 0); } .hair-2 { width: 5vmin; height: 5vmin; top: -20%; left: 49%; box-shadow: 1.25vmin -1vmin var(--hair) } .hair-2::after { border-radius: 50%; width: 5vmin; height: 5vmin; top: 10%; left: 6vmin; box-shadow: -1vmin -1vmin var(--hair) } .hair-top::after { width: 70%; height: 90%; background: var(--hair); left: 90%; transform: skew(20deg); border-radius: 20% / 0 70% 0 50%; } .ear { width: 7vmin; height: 10vmin; background: var(--skin); left: -4vmin; top: 40%; border-radius: 100% / 70% 80% 0 100%; background-image: linear-gradient(to right, transparent, rgba(0,0,0,0.1)); transform: rotate(-5deg); } .ear + .ear { transform: scaleX(-1) rotate(-10deg); left: auto; right: -3.7vmin; } .hair-back { width: 106%; height: 70%; border-radius: 120% 120% 50% 50% / 100%; left: -3%; top: -10%; background: var(--hair); box-shadow: inset 0 0 0 5vmin rgba(0,0,0,0.3); } @keyframes breathe { 0%, 100% { border-radius: 100% / 150% 150% 10% 10%; } 50% { border-radius: 100% / 165% 165% 10% 10%; } } .body { width: 25%; height: 38%; background: var(--shirt); border-radius: 100% / 150% 150% 10% 10%; top: 40%; left: 50%; transform: translate(-50%, 0); box-shadow: inset 0 -5.5vmin var(--shirt), inset 0 -9.5vmin var(--belt); animation: breathe 4s infinite; } .body::before { width: 6vmin; height: 5vmin; border: 0.8vmin solid silver; border-radius: 1vmin; top: 100%; left: 50%; transform: translate(-50%, -10vmin); background-image: radial-gradient(circle at 50% 50%, silver 15%, transparent 0), radial-gradient(circle at 75% 50%, silver 10%, transparent 0); } .jacket { width: 37%; height: 65%; background: #222; border-radius: 100% 0 20% 55% / 100% 20% 3% 10%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0