摘要:原本自己也想画大白,正巧看到一位同学也用相同的方法画了。且细节相当到位。同时,我也希望有更多的同学发挥自己的想象力,来找个东西画画。如果看过我前几次的分享,肯定能马上想到大白的各个部位是怎么实现的。
原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了。 且细节相当到位。所以我就fork了一下,在此我也分享一下。
同时,我也希望有更多的同学发挥自己的想象力,来找个东西画画。
如果看过我前几次的分享,肯定能马上想到大白的各个部位是怎么实现的。
第一步:头GitHub传送门:https://github.com/lancer07/css3_Baymax
.baymax-head { position: absolute; left: 50%; margin-left: -21px; width: 42px; height: 28px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); z-index: 3; overflow: hidden; -webkit-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5); -moz-box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5); box-shadow: 0 6px 8px -5px rgba(128, 128, 128, 0.75), inset 0 -6px 8px -5px rgba(204, 204, 204, 0.5); } .baymax-head .head-highlight { position: absolute; top: 12%; right: 25%; width: 45%; height: 1%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffffff; -webkit-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent; -moz-box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent; box-shadow: 0 0 18px 9px #ffffff, 0 0 0 0 transparent; } .baymax-head .baymax-eyes { position: relative; top: 10px; left: 50%; -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); height: 1px; width: 20px; background: #333333; } .baymax-head .baymax-eyes:before, .baymax-head .baymax-eyes:after { top: -3px; width: 6px; height: 6px; background: #333333; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .baymax-head .baymax-eyes:before { left: -2px; } .baymax-head .baymax-eyes:after { right: -2px; }第二步:身体
.baymax-body { position: absolute; top: 18.66667px; left: 50%; -webkit-transform: translateX(-62px); -moz-transform: translateX(-62px); -ms-transform: translateX(-62px); -o-transform: translateX(-62px); transform: translateX(-62px); width: 124px; height: 180px; -webkit-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; -moz-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; -ms-border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; overflow: hidden; z-index: 2; } .baymax-body .body-highlight { position: absolute; top: 20%; right: 40%; width: 0%; height: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffffff; -webkit-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent; -moz-box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent; box-shadow: 0 0 45px 25px #ffffff, 0 0 0 0 transparent; } .baymax-body .baymax-heart { position: absolute; top: 35px; right: 30%; height: 12px; width: 12px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .baymax-body:before, .baymax-body:after { top: 55px; width: 15px; height: 40px; } .baymax-body:before { left: -8px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } .baymax-body:after { right: -8px; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); }第三步:双手
.baymax-arm { position: absolute; top: 28px; height: 145px; width: 40px; overflow: hidden; z-index: 1; } .baymax-arm:after { top: 60px; height: 50px; width: 25px; } .baymax-arm .arm-highlight { position: absolute; top: 25%; width: 1%; height: 65%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffffff; -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; } .baymax-left-arm { left: 65px; -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); -webkit-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px; -moz-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px; -ms-border-radius: 90px 20px 20px 90px/200px 40px 40px 200px; border-radius: 90px 20px 20px 90px/200px 40px 40px 200px; } .baymax-left-arm:after { left: -20px; } .baymax-left-arm .larm-highlight { left: 30%; } .baymax-right-arm { right: 65px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); -webkit-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px; -moz-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px; -ms-border-radius: 20px 90px 90px 20px/40px 200px 200px 40px; border-radius: 20px 90px 90px 20px/40px 200px 200px 40px; } .baymax-right-arm:after { right: -20px; } .baymax-right-arm .rarm-highlight { right: 30%; }第四步:双腿
.baymax-leg { position: absolute; top: 165px; width: 48px; height: 85px; overflow: hidden; z-index: 1; } .baymax-leg:before { top: -50px; height: 100px; width: 30px; } .baymax-leg:after { bottom: -22px; height: 30px; width: 60px; } .baymax-leg .leg-highlight { position: absolute; top: 40%; width: 1%; height: 38%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; background: #ffffff; -webkit-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; -moz-box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; box-shadow: 0 0 16px 7px rgba(255, 255, 255, 0.8), 0 0 0 0 transparent; } .baymax-leg .crosspart { content: ""; position: absolute; top: 0; width: 48px; height: 85px; -webkit-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent; -moz-box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent; box-shadow: inset 0px 0px 15px 0px #cccccc, 0 0 0 0 transparent; } .baymax-left-leg { left: 50%; margin-left: -50px; -webkit-border-radius: 20% 0 30% 50%/50% 0 30% 50%; -moz-border-radius: 20% 0 30% 50%/50% 0 30% 50%; -ms-border-radius: 20% 0 30% 50%/50% 0 30% 50%; border-radius: 20% 0 30% 50%/50% 0 30% 50%; } .baymax-left-leg:before { left: -20px; } .baymax-left-leg:after { left: 0; } .baymax-left-leg .lleg-highlight { left: 25px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } .baymax-right-leg { right: 50%; margin-right: -50px; -webkit-border-radius: 0 20% 50% 30%/0 50% 50% 30%; -moz-border-radius: 0 20% 50% 30%/0 50% 50% 30%; -ms-border-radius: 0 20% 50% 30%/0 50% 50% 30%; border-radius: 0 20% 50% 30%/0 50% 50% 30%; } .baymax-right-leg:before { right: -20px; } .baymax-right-leg:after { right: 0; } .baymax-right-leg .rleg-highlight { right: 20px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); }
欢迎大家吐槽
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115249.html
摘要:层叠即表示允许以多种方式来描述样式,一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用后,将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...
摘要:原本自己也想画大白,正巧看到一位同学也用相同的方法画了。且细节相当到位。同时,我也希望有更多的同学发挥自己的想象力,来找个东西画画。如果看过我前几次的分享,肯定能马上想到大白的各个部位是怎么实现的。 原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了。 且细节相当到位。所以我就fork了一下,在此我也分享一下...
摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。有的同学说,用不是能画得更逼真而且更简单吗这点我也非常赞同,但我的理由还是,那就没意思了。这次写的详细一点,把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。有的同学说,用c...
摘要:仅仅使用作为身体的布局,用的各种和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。有的同学说,用不是能画得更逼真而且更简单吗这点我也非常赞同,但我的理由还是,那就没意思了。这次写的详细一点,把各个部位都拆出来分析。收工欢迎大家吐槽 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。有的同学说,用c...
阅读 3685·2021-11-24 09:39
阅读 2555·2019-08-30 15:54
阅读 1056·2019-08-30 13:01
阅读 3345·2019-08-28 18:30
阅读 1572·2019-08-26 17:44
阅读 3529·2019-08-26 11:31
阅读 2355·2019-08-26 10:40
阅读 1158·2019-08-26 10:27