纯css实现电影大白的卡通形象效果
代码语言:html
所属分类:动画
代码描述:纯css实现电影大白的卡通形象效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .cc, #baymax, #baymax .head, #baymax .head .mouth, #baymax .body, #baymax .body .chest, #baymax .body .chest i, #baymax .body .chest i:before, #baymax .body .belly { -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } html, body { position: absolute; overflow: hidden; height: 100%; width: 100%; background-color: white; } body { background-color: rgba(176, 0, 2, 0.8); } #baymax { cursor: pointer; top: 50%; left: 50%; } #baymax .head { z-index: 10; top: -120px; left: 50%; border-radius: 50%; width: 90px; height: 60px; background-color: white; box-shadow: 0 -15px 30px rgba(23, 34, 45, 0.2) inset, 0 5px 15px rgba(23, 34, 45, 0.2); } #baymax .head .eye, #baymax .head .mouth { position: absolute; display: inline-block; } #baymax .head .eye { animation: blink 6s ease-in-out infinite; margin-top: -4.5px; background-color: #202b36; border-radius: 50%; width: 8.1px; height: 9px; top: 40%; left: 50%; } #baymax .head .eye.left { margin-left: -24.5px; } #baymax .head .eye.right { margin-left: 15.5px; } #baymax .head .mouth { top: 40%; left: 50%; width: 38px; background-color: #202b36; height: 1px; } #baymax .body { z-index: 5; top: 0px; left: 50%; } #baymax .body .arm { z-index: 1; position: absolute; left: 50%; top: 50%; } #baymax .body .arm.right { -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } #baymax .body .arm.left { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } #baymax .body .arm .fingers:before, #baymax .body .arm .fingers:after { content: ""; position: absolute; background-color: white; border-radius: 50%; width: 18px; height: 40px; z-index: 2; } #baymax .body .arm .fingers:before { margin-left: -130px; margin-top: 145px; box-shadow: 2px -4px 4px rgba(23, 34, 45, 0.4) inset; -moz-transform-origin: top center; -ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } #baymax .body .arm .fingers:after { margin-left: -102px; margin-top: 140px; box-shadow: -2px -4px 8px rgba(23, 34, 45, 0.3) inset; -moz-transform-origin: top center; -ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); z-index: -1; } #baymax .body .arm:before, #baymax .body .arm:after { content: ""; position: absolute; background-color: white; border-radius: 50%; z-index: 1; } #baymax .body .arm:before { width: 90px; height: 200px; left: -80px; top: -75px; -moz-transform-origin: top center; -ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } #baymax .body .arm:after { width: 80px; height: 150px; left: -158px; top: 20px; -moz-transform-origin: top center; -ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); box-shadow: 4px -10px 10px rgba(23, 34, 45, 0.2) inset; } #baymax .body .chest { width: 190px; height: 260px; top: 20px; background-color: white; position: absolute; display: inline-block; border-radius: 50%; -moz-transform-origin: top center; -ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; z-index: 3; } #baymax .body .chest i { width: 21px; height: 21px; background-color: white; border-radius: 50%; box-shadow: 0 -5px 8px rgba(23, 34, 45, 0.15) inset, 2px 3px 2px rgba(23, 34, 45, 0.05); right: 30px; top: 50px; opacity: 0.75; } #baymax .body .chest i:before { content: ""; width: 75%; height: 65%; top: 45%; left: 50%; background-color: transparent; border-radius: 50%; box-shadow: 0 5px 8px rgba(23, 34, 45, 0.08) inset; } #baymax .body .belly { width: 240px; height: 310px; top: 60px; background-color: white; position: absolute; display: inline-block; border-radius: 50%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; z-index: 2; box-shadow: 0 -25px 40px rgba(23, 34, 45, 0.15) inset, 0 5px 15px rgba(23, 34, 45, 0.25); } #baymax .leg { position: absolute; width: 50px; height: 160px; top: 100px; margin-left: -50px; background-color: white; box-shadow: -7px -6px 7px rgba(23, 34, 45, 0.1) inset; border-bottom-right-radius: 15px; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; transform-origin: top right; } #baymax .leg.right { -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } #baymax .leg.left { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } #baymax .leg:before { content: ""; position: absolute; left: -25px; width: 25px; height: 100%; background-color: white; box-shadow: 7px 15px 7px rgba(23, 34, 45, 0.4) inset; border-bottom-left-radius: 500%; z-index: -1; } #baymax:hover .head, #baymax:active .head, #baymax:focus .head { animation: bonk 0.6s ease-in-out 0.1s; } #baymax:hover .body .chest, #baymax:active .body .chest, #baymax:focus .body .chest { animation: boop 0.6s ease-in-out 0.1s; } #baymax:hover .body i, #baymax:active .body i, #baymax:focus .body i { animation: bonk 0.6s ease-in-out; } #baymax:hover .body .belly, #baymax:active .body .belly, #baymax:focus .body .belly { animation: boop 0.6s ease-in-out; } #baymax:hover .body .arm.left, #baymax:active .body .arm.left, #baymax:focus .body .arm.left { animation: floop 0.6s ease-in-out 0.2s; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0