纯css布局实现一拳超人琦玉效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一拳超人琦玉效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::after, *::before { box-sizing: border-box; position: absolute; } :root { --size: 80; --unit: calc((var(--size) / 827) * 1vmin); } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #ced6e0; } .container { height: calc(var(--unit) * 827); width: calc(var(--unit) * 555); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(4px 3px 9px #a4b0be); } .saitama { width: 100%; height: 100%; } .head { width: 100%; height: 45%; top: 5%; left: 0%; } .body { width: 58%; height: 46%; top: 50%; left: 20.5%; } .face { background: linear-gradient( 199deg, #fdddc2 0% 12%, #e2ae87 40% 95%, rgba(255, 255, 255, 0.1) 98% 100% ), linear-gradient( to right, #f0cbb2 0%, #eac0a5 2%, #dfaf8b 6%, #e2ae87 15%, #e0ae89 35%, #e6b28b 50%, #e0ae89 65%, #e2ae87 90%, #f8cca9 98% ); width: 81%; height: 100%; left: 10%; border-radius: 25% / 40% 40% 25% 25%; z-index: 3; } .ear { background-color: #e6b28b; height: calc(var(--unit) * 95); width: calc(var(--unit) * 80); top: 48%; border-radius: 41%; } .ear-left { left: 4%; } .ear-right { right: 5%; } .eye { background: radial-gradient( circle at left, #3d302b 0%, #27221e 5%, #242122 15%, #322e2e 50%, #4b4746 69%, #4e4d4b 90% ); height: calc(var(--unit) * 82); width: calc(var(--unit) * 80); top: 48%; border-radius: 50%; } .eye-left { left: 14%; } .eye-right { right: 9%; } .eyebrow { height: calc(var(--unit) * 82); width: calc(var(--unit) * 80); top: 41%; border-radius: 25% 5% 0 0 / 16% 5% 0 0; border-top: calc(var(--unit) * 5) solid #2c2928; } .eyebrow-left { left: 14%; transform: rotate(-1deg); } .eyebrow-right { right: 9%; transform: rotateY(180deg); } .nose { height: calc(var(--unit) * 55); width: calc(var(--unit) * 45); top: 60%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0