css绘制一个复仇者联盟卡通人物效果代码
代码语言:html
所属分类:布局界面
代码描述:css绘制一个复仇者联盟卡通人物效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:300); *, *:before, *:after { box-sizing: border-box; } body { font-size: 16px; position: absolute; width: 100%; height: 100%; font-family: 'Lato', sans-serif; } .wrapper { position: relative; width: 550px; height: 365px; margin: 15% auto; -webkit-animation: shake 7s infinite; animation: shake 7s infinite; } .hulk { position: absolute; margin-left: 200px; bottom: 0px; margin-bottom: 300px; } .hulk .head { width: 4.713em; position: absolute; margin-top: -2.75em; margin-left: 3.563em; border-bottom: 3.75em solid #bdbd00; border-left: 0.938em solid transparent; border-right: 0.938em solid transparent; height: 0; z-index: 10; } .hulk .head::after { content: ""; width: 2.25em; height: 0.375em; position: absolute; margin-top: 0.538em; margin-left: 0.313em; background: #034600; } .hulk .head::before { content: ""; width: 3.25em; height: 0.75em; position: absolute; margin-top: -0.75em; margin-left: -0.25em; background: #034600; border-top-left-radius: 1.875em; border-top-right-radius: 1.875em; } .hulk .mouth { width: 31px; height: 0px; position: absolute; margin-top: 25px; margin-left: 8px; overflow: hidden; background-image: linear-gradient(to bottom, #ffffff, #ffffff 25%, #4b0a00 25%, #4b0a00 70%, #ffffff 75%, #ffffff 100%); border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; -webkit-animation: mouthOpen 7s infinite; animation: mouthOpen 7s infinite; } .hulk .mouth::before { content: ""; width: 10px; height: 7px; position: absolute; background: #902e2b; margin-top: 9px; margin-left: 11px; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } .hulk .right-arm { width: 13.313em; height: 13.75em; margin-top: 1em; margin-left: 2em; border-radius: 50%; background: #b5b500; position: absolute; clip: rect(-1em, 11.2em, 12.55em, 7.625em); -webkit-animation: hulkRightarm 7s infinite; animation: hulkRightarm 7s infinite; } .hulk .right-arm::after { content: ""; width: 12.063em; height: 9.625em; border-radius: 50%; background: white; position: absolute; transform: translateY(1.25em); margin-left: -3.313em; } .hulk .left-arm { width: 13.313em; height: 13.75em; margin-top: 1em; margin-left: -4.3em; border-radius: 50%; background: #949400; position: absolute; clip: rect(-0.188em, 6.1em, 13.875em, 2.3em); -webkit-animation: hulkLeftarm 7s infinite; animation: hulkLeftarm 7s infinite; } .hulk .left-arm::after { content: ""; width: 12.063em; height: 9.625em; border-radius: 50%; background: white; position: absolute; transform: translateY(1.25em); margin-left: 4.563em; } .hulk .fist { width: 4.375em; height: 4.375em; position: absolute; border-radius: 50%; margin-top: 11.7em; margin-left: -2.1em; background: #949400; box-shadow: 11.1em 0 0 #b5b500; z-index: 10; -webkit-animation: hulkHands 7s infinite; animation: hulkHands 7s infinite; } .hulk .body { width: 12.5em; height: 12.5em; background: #bdbd00; border-radius: 50%; position: absolute; box-shadow: inset 1.125em 0 0 #a4a400, -0.938em 0 0 #8a8a00; z-index: 10; } .hulk .body::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; position: absolute; margin-top: 3.125em; margin-left: 1.375em; background: #8a8a00; box-shadow: 7.625em 0 0 #8a8a00; } .hulk .body::after { content: ""; position: absolute; width: 0.313em; height: 0.313em; border-radius: 50%; margin-top: 10em; margin-left: 5.625em; background: #8a8a00; box-shadow: 0 2.625em 0 #9ac7f1; } .hulk .right-leg { width: 0.625em; height: 6.438em; position: absolute; margin-left: 4.25em; margin-top: 12.3em; background-image: linear-gradient(to bottom, #2e0e62, #2e0e62 50%, #575700 50%, #575700 100%); -webkit-animation: hulkPants2 7s infinite; animation: hulkPants2 7s infinite; } .hulk .right-leg::after { content: ""; width: 0.938em; height: 0.875em; position: absolute; margin-left: 0.625em; background: #43158e; } .hulk .right-leg::before { content: ""; width: 1.125em; height: 0.188em; position: absolute; margin-top: 6.25em; margin-left: -1.125em; background: #575700; } .hulk .left-leg { width: 0.625em; height: 6.438em; position: absolute; margin-left: 6.688em; margin-top: 12.3em; background-image: linear-gradient(to bottom, #581bbb, #581bbb 50%, #bdbd00 50%, #bdbd00 100%); -webkit-animation: hulkPants 7s infinite; animation: hulkPants 7s infinite; } .hulk .left-leg::after { content: ""; width: 0.938em; height: 0.875em; position: absolute; background: #581bbb; margin-left: -0.938em; } .hulk .left-leg::before { content: ""; width: 1.125em; height: 0.188em; position: absolute; margin-top: 6.25em; margin-left: 0.625em; background: #bdbd00; } .captain { position: absolute; z-index: 1000; margin-left: 355px; bottom: 0px; margin-bottom: 146px; } .captain .head { width: 21px; height: 36px; background: #43abf0; position: absolute; margin-top: -36px; margin-left: 44px; border-top-left-radius: 20px; border-top-right-radius: 20px; color: #fff; text-align: center; font-size: 0.6em; font-weight: bold; } .captain .head::before { content: ""; width: 21px; height: 17px; background: #fdb0a4; position: absolute; margin-left: -7px; margin-top: 19px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: inset 8px 0 0 0 #fc9a8b; } .captain .head::after { content: ""; width: 4px; height: 4px; position: absolute; background: #fdb0a4; border-radius: 50%; margin-top: 16px; margin-left: -5px; } .captain .body { height: 53px; width: 107px; border-radius: 0 0 110px 110px; background: #43abf0; box-shadow: inset 8px 0px 0 0 #29708f, inset 17px 0px 0 0 #35a5ef; z-index: 5; } .captain .body::before { content: ""; width: 133px; height: 30px; margin-left: -14px; position: absolute; border-radius: 30px; background-image: linear-gradient(to right, #29708f, #43abf0); z-index: -1; } .captain .body::after { content: ''; width: 30px; height: 10px; position: absolute; margin-top: 49px; margin-left: 38px; background-image: linear-gradient(to right, #9d2f00, #9d2f00 30%, #ffffcb 30%, #ffffcb 70%, #b63700 70%, #b63700 100%); } .captain .body .star { display: block; color: #fff; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #fff; border-left: 10px solid transparent; margin-top: 18px; margin-left: 43px; position: absolute; transform: rotate(35deg); } .captain .body .star::before { border-bottom: 8px solid #fff; border-left: 3px solid transparent; border-right: 3px solid transparent; position: relative; height: 0; width: 0; top: -4px; left: -6px; display: block; content: ''; transform: rotate(-35deg); } .captain .body .star::after { position: absolute; display: block; color: red; top: 0px; left: -10px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #fff; border-left: 10px solid transparent; transform: rotate(-70deg); content: ''; } .captain .arms { width: 10px; height: 60px; position: absolute; background: #ffffcb; margin-top: -30px; margin-left: 10px; box-shadow: 75px 0 0 0 #ffffcb; z-index: -1; } .captain .arms::before { content: ""; width: 28px; height: 50px; position: absolute; background: #ffffcb; border-radius: 30% 50%; margin-left: -18px; margin-top: -3px; box-shadow: 95px 0 0 0 #ffffcb; } .captain .shield { width: 40px; height: 40px; background: #43abf0; border-radius: 50%; position: absolute; z-index: 100; margin-left: 75px; margin-top: 30px; box-shadow: 0 0 0 8px #ffffcb, 0 0 0 18px #c53905; transform: rotate(-30deg); } .captain .shield .star { display: block; color: #fff; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #fff; border-left: 10px solid transparent; margin-top: 15px; margin-left: 10px; position: absolute; transform: rotate(35deg); } .captain .shield .star::before { border-bottom: 8px solid #fff; border-left: 3px solid transparent; border-right: 3px solid transparent; position: relative; height: 0; width: 0; top: -4px; left: -6px; display: block; content: ''; transform: rotate(-35deg); } .captain .shield .star::after { position: absolute; display: block; color: red; top: 0px; left: -10px; width: 0px; height: 0px; border-right: 10px solid transparent; border-bottom: 7px solid #fff; border-left: 10px solid transparent; transform: rotate(-70deg); content: ''; } .captain .hands { width: 15px; height: 30px; position: absolute; margin-top: 29px; margin-left: 8px; background: #a73200; transform: skew(10deg); } .captain .hands::before { content: ""; width: 10px; height: 30px; background: #b3b300; position: absolute; margin-left: 12px; transform: skew(-10deg); } .captain .hands::after { content: ""; width: 13px; height: 13px; border-radius: 50%; position: absolute; margin-top: 21px; margin-left: -1px; background: #a73200; } .captain .legs { width: 8px; height: 100px; background: #29708f; position: absolute; margin-left: 38px; margin-top: 5px; box-shadow: 22px 0 0 0 #43abf0; } .captain .legs::before { content: ""; width: 30px; height: 5px; background: #501800; position: absolute; } .captain .legs::after { content: ""; width: 14px; height: 9px; background-image: linear-gradient(to right, #29708f, #43abf0); position: absolute; margin-left: 8px; margin-top: 5px; } .captain .boots { width: 10px; height: 41px; position: absolute; margin-top: 105px; margin-left: 37px; background: #832800; box-shadow: 22px 0 0 0 #b63700; } .captain .boots::after { content: ""; width: 25px; height: 2px; position: absolute; background: #832800; margin-top: 39px; margin-left: -15px; box-shadow: 40px 0 0 0 #b63700; } .captain .boots::before { content: ""; width: 18px; height: 12px; background: #832800; position: absolute; margin-left: -4px; box-shadow: 22px 0 0 0 #b63700; } .ironman { position: absolute; z-index: 900; margin-left: 0; margin-bottom: 135px; bottom: 0; } .ironman .helmet { width: 22px; height: 34px; background: #ab3300; position: absolute; margin-top: -33px; margin-left: 44px; border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden; } .ironman .helmet::before { content: ""; width: 7px; height: 2px; background: white; position: absolute; margin-top: 10px; margin-left: 0px; z-index: 3; box-shadow: 15px 0 0 0 white; } .ironman .mask { width: 10px; height: 18px; background: #deb800; position: relative; margin-top: 7px; margin-left: 6px; } .ironman .mask::before { content: ""; width: 13px; height: 18px; background: #deb800; position: absolute; transform: rotate(60deg); margin-top: -3px; margin-left: 4px; } .ironman .mask::after { content: ""; width: 13px; height: 18px; background: #deb800; position: absolute; transform: rotate(-60deg); margin-top: -3px; margin-left: -5px; } .ironman .body { height: 53px; width: 107px; border-radius: 0 0 110px 110px; background: #ab3300; box-shadow: inset 10px 0px 0 0 #922b00, inset 20px 0px 0 0 #9c2e00; padding-top: 11px; z-index: 50; } .ironman .body::before { content: ""; width: 32px; height: 32px; background: #922b00; position: absolute; border-radius: 50%; margin-left: -15px; margin-top: -18px; box-shadow: 105px 0 0 0 #ab3300; z-index: 50; } .ironman .body::after { content: ""; width: 40px; height: 30px; position: absolute; margin-top: 20px; margin-left: 35px; background-image: linear-gradient(to right, #922b00, #922b00 15%, #9c2e00 15%, #9c2e00 29%, #ab3300 20%, #ab3300 20%); } .ironman .power { width: 17px; height: 17px; background: white; border-radius: 50%; margin: 0 auto; box-shadow: 0 0 0 5px #deb800; } .ironman .left-leg { width: 10px; height: 90px; background: #c98700; position: absolute; margin-left: 35px; margin-top: 12px; border-top-right-radius: 10px; } .ironman .left-leg::before { content: ""; width: 25px; height: 65px; background: #922b00; position: absolute; border-top-right-radius: 20px; margin-top: 60px; margin-left: -10px; } .ironman .right-leg { width: 10px; height: 90px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0