css布局实现一个小孩踢足球的效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个小孩踢足球的效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { overflow: hidden; background: #9c76; } .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; } /****/ .cartoon { --skin: #fca; --cheeks: #faa; --shirt: #ace; --shorts: #49c; --hair: #630; } .head { width: 38%; height: 30%; border-radius: 100% / 70% 70% 50% 50%; background: var(--skin); background-image: radial-gradient(at -30% 90%, var(--cheeks) 30%, transparent 0), radial-gradient(at 115% 90%, var(--cheeks) 30%, transparent 0); transform: rotate(10deg); top: 18%; left: 30%; } .eye { width: 7.5vmin; height: 7.5vmin; background: #fff; top: 30%; left: 20%; } .eye::after { width: 15%; height:15%; background: #222; border-radius: 45%; top: 50%; left: 50%; } .eye ~ .eye { left: 44.5%; width: 8vmin; height: 8vmin; } .nose { width: 6vmin; height: 4vmin; background: var(--cheeks); border-radius: 100% 0 100% 100%; top: 51%; left: 30%; } .mouth { width: 30%; height: 15%; border: 0.25vmin solid transparent; border-bottom: 0.5vmin solid #222; top: 66%; left: 35%; transform: rotate(-10deg); } .body { width: 12%; height: 30%; border-radius: 120% / 0 0 20% 20%; background: #f007; transform: rotate(-20deg); left: 47%; top: 44%; background: var(--shirt); } .shorts { width: 12%; height: 15%; background: var(--shorts); transform: rotate(-20deg); top: 70%; left: 53.75%; box-shadow: inset 0 0 0 10vmin rgba(0,0,0,0.1); } .shorts::after { width: 150%; height: 85%; top: 5%; background: var(--shorts); right: -5%; transform: rotate(-10deg); border-radius: 0 0 70% 0; } .leg-1 { height: 5%; width: 33%; background: var(--skin); transform: rotate(-25deg); top: 83%; left: 22%; } .leg-2 { border: 4vmin solid transparent; border-right-color: var(--skin); border-bottom-color: var(--skin); width: 32%; height: 30%; transform: rotate(70deg); top: 63%; left: 57%; } .foot { width: 8%; height: 16%; background: #f005; border-radius: 0 100% 20% 0; background: linear-gradient(to left, #444 85%, #fff 0) } .foot-1 { transform: rotate(-20deg); top: 81%; left: 15%; } .foot-2 { transform: rotate(120deg); top: 76%; left: 86%; } .sleeve { width: 8%; height: 11%; background: var(--shirt); } .sleeve-1 { transform: rotate(55deg); top: 48%; left: 37%; } .sleeve-2 { height: 14%; transform: rotate(-65deg); top: 48%; left: 56%; } .arm-1 { border: 3vmin solid transparent; width: 25%; height: 22%; border-left-color: var(--skin); border-bottom-color: var(--skin); top: 37%; left: 18%; transform: rotate(-14deg); } .arm-2 { width: 25%; height: 3vmin; background: var(--skin); transform: rotate(25deg); top: 60%; left: 63%; } .hair { width: 20%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0