纯css实现小小黑客卡通人物布局效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现小小黑客卡通人物布局效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; background-color: black; animation: turnOnTheLights 4s forwards; } .container { width: 450px; height: 450px; position: absolute; transform: translate(-50%, -50%) scale(0.7); left: 50%; top: 50%; } .sombra { height: 100%; width: 300px; opacity: 0; animation: hereIAm 4s forwards; } .sombra > * { position: absolute; display: inline-block; } .sombra > *:before, .sombra > *:after { content: ""; position: absolute; } @keyframes hereIAm { 20% { opacity: 0; } 100% { opacity: 1; } } @keyframes turnOnTheLights { 20% { background-color: black; } 100% { background-color: #483c4e; } } .shave { width: 210px; height: 220px; background-color: #614b31; border-radius: 100%; left: calc(50% - 90px); top: calc(16% + 0px); transform: rotate(45deg); overflow: hidden; will-change: transform; animation: headBounce 2s ease infinite; } .shave .led { position: absolute; width: 20px; height: 70px; background-color: #f76aff; background-color: #f76aff; background-image: -webkit-linear-gradient(to top, #b4b4b4 30%, #f76aff 30%); background-image: linear-gradient(to top, #b4b4b4 30%, #f76aff 30%); transform: scaleX(-1); } .shave .top-led { left: 110px; } .shave .top-led:before { position: absolute; content: ""; width: 6px; height: 100px; border-radius: 100%; background-color: #ffbe85; transform: translateX(18px) translateY(-10px); } .shave .bottom-led { height: 90px; width: 15px; left: 160px; transform: rotate(20deg); } .shave .bottom-led:before { position: absolute; content: ""; width: 5px; height: 15px; background-color: #ffbe85; top: 72px; left: 20px; } .shave .bottom-led:after { position: absolute; content: ""; width: 12px; height: 50px; top: 20px; left: 20px; border: 5px solid #ffbe85; border-top-right-radius: 100px; border-bottom-right-radius: 100px; } .shave .shave-decal { position: absolute; width: 8px; height: 55px; background-color: #ffbe85; left: 144px; transform: rotate(10deg); } .shave .shave-decal:after { position: absolute; content: ""; width: 6px; height: 6px; border-radius: 100%; border: 5px solid #ffbe85; top: 52px; left: -5px; } .hair-mid { width: 100px; height: 90px; background-color: #312717; left: calc(50% - 50px); top: calc(10% - 10px); transform: rotate(-45deg); border-radius: 29% 71% 94% 6% / 100% 35% 65% 0%; border: 2px solid #20190f; will-change: transform; animation: hairMidBounce 2s ease infinite; } .hair-mid:before, .hair-mid:after { content: ""; position: absolute; background-color: #c5ab82; opacity: 0.7; } .hair-mid:before { left: 55px; top: 70px; width: 5px; height: 5px; border-radius: 100%; } .hair-mid:after { left: 65px; top: 60px; width: 7px; height: 7px; border-radius: 100%; } .hair-back { width: 90px; height: 80px; background-color: #312717; left: 50%; top: 40px; transform: rotate(-25deg); border-radius: 29% 71% 94% 6% / 100% 21% 79% 0%; border-radius: 29% 71% 94% 6% / 100% 35% 65% 0%; border: 2px solid #20190f; transform: rotate(-25deg); will-change: transform; background-image: radial-gradient(3px 3px at 85% 50%, rgba(197, 171, 130, 0.5) 99%, transparent); animation: hairBackBounce 2s ease infinite; } .hair-back:after { position: absolute; content: ""; width: 80px; height: 80px; border-radius: 100%; background-color: #a350f9; background-image: -webkit-linear-gradient(-45deg, #a350f9, #d7b3fc, #f1e4fe); background-image: linear-gradient(-45deg, #a350f9, #d7b3fc, #f1e4fe); top: 170px; right: 200px; } .hair { width: 115px; height: 260px; background-color: #312717; border-radius: 30% 45% / 60% 50%; border-left: 2px solid #20190f; border-top: 3px solid #20190f; transform-origin: center; transform: rotate(20deg); left: 90px; top: 50px; will-change: transform; background-color: #312717; background-image: -webkit-linear-gradient(to bottom, #312717 40%, 65%, #a350f9, #d7b3fc); background-image: linear-gradient(to bottom, #312717 40%, 65%, #a350f9, #d7b3fc); animation: hairBounce 2s ease infinite; } .hair > .shine { position: absolute; width: 15px; height: 30px; left: 20px; top: 50px; border-radius: 100%; opacity: 0.5; background-color: #c5ab82; } .hair > .shine:before { position: absolute; content: ""; width: 10px; height: 10px; border-radius: 100%; background-color: #c5ab82; left: 20px; } .hair > .shine:after { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 100%; background-color: #c5ab82; left: 70px; top: -15px; } .curl { width: 100px; height: 100px; border-radius: 100%; background-color: #a350f9; background-image: -webkit-linear-gradient(to bottom, #a350f9, #d7b3fc, #f1e4fe); background-image: linear-gradient(to bottom, #a350f9, #d7b3fc, #f1e4fe); top: calc(60% + 0px); left: calc(12% + 0px); animation: bodyBounce 2s ease infinite; } .curl:before { position: absolute; content: ""; width: 70px; height: 70px; background-color: black; animation: turnOnTheLights 4s forwards; border-radius: 100%; right: 50px; top: -5px; } .head { width: 155px; height: 150px; top: calc(38% + 1px); left: calc(50% - 90px); z-index: 2; will-change: transform; animation: faceBounce 2s ease infinite; } .head:before { content: ""; position: absolute; border-bottom: 20px solid #ffbe85; border-left: 40px solid transparent; border-right: 32px solid transparent; top: -20px; left: 0.4em; } .head:after { content: ""; position: absolute; border-bottom: 20px solid #ffbe85; border-left: 50px solid transparent; border-right: 30px solid transparent; top: -20px; left: 4em; } .head .forehead { position: relative; width: 100%; height: 50%; background-color: #ffbe85; transform: skew(-10deg); clip-path: polygon(74% 0, 100% 34%, 100% 100%, 0 100%, 0 0); } .head .upper-lip { position: relative; width: 100%; height: 18%; background-color: #ffbe85; transform: skew(20deg); left: -2px; } .head .lower-lip { position: relative; width: 95%; height: 10%; background-color: #ffbe85; transform: skew(-30deg); border-bottom-left-radius: 3px; left: -2px; } .head .chin-roof { position: relative; width: 100%; height: 12%; background-color: #ffbe85; transform: skew(30deg); border-radius: 10px; left: -4px; top: -2px; } .head .chin { position: relative; width: 0; height: 0; border-top: 30px solid #ffbe85; border-left: 70px solid transparent; border-right: 90px solid transparent; left: 0.1em; top: -5px; } .head .chin:before { position: absolute; content: ""; width: 30px; height: 30px; background-color: #ffbe85; border-radius: 100%; bottom: 30px; left: 50px; } .head .face { position: absolute; width: 150px; height: 150px; top: 0; transform: rotate(5deg); } .head .face .brows { position: absolute; width: 80%; height: 20%; left: 10px; top: 15px; } .head .face .brows:before { position: absolute; content: ""; width: 20px; height: 10px; border-top: 5px solid #312717; border-radius: 100%; left: 10px; clip-path: polygon(0 0, 39% 0, 39% 100%, 0 100%); top: 11px; left: 6px; } .head .face .brows:after { position: absolute; content: ""; width: 25px; height: 10px; border-top: 6px solid #312717; border-radius: 100%; left: 102px; clip-path: polygon(100% 0, 40% 0, 40% 100%, 100% 100%); top: 18px; } .head .face .brows .left-brow { position: absolute; width: 40px; height: 10px; top: 12px; transform: rotate(15deg); border-top: 5px solid #312717; border-radius: 100%; clip-path: polygon(100% 0, 39% 0, 39% 100%, 100% 100%); } .head .face .brows .right-brow { position: absolute; width: 48px; height: 10px; top: 20px; border-top: 6px solid #312717; left: 79px; border-radius: 100%; transform: rotate(-20deg); clip-path: polygon(0 0, 65% 0, 65% 100%, 0 100%); } .head .face .eyes { position: relative; width: 55%; height: 45%; left: 30px; top: 35%; display: flex; justify-content: space-between; align-items: baseline; } .head .face .eyes:before, .head .face .eyes:after { content: ""; height: 70%; width: 18px; background-color: #a350f9; background-image: -webkit-linear-gradient(to bottom, #891ff7, #a350f9, #f76aff); background-image: linear-gradient(to bottom, #891ff7, #a350f9, #f76aff); border-radius: 52% 48% 50% 50% / 55% 60% 40% 45%; animation: blink 3s infinite; } .head .face .eyes .lashes { position: absolute; width: 100%; height: 13px; display: flex; top: -8px; left: 3px; justify-content: space-between; } .head .face .eyes .lashes:before, .head .face .eyes .lashes:after { content: ""; position: absolute; width: 10px; height: 12px; border-rad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0