首页>服务器运维>站长技能提升>纯HTML+CSS实现阿童木头像
回复
« 返回列表
zyckai
zyckai
U声U色
U声U色
  • UID94568
  • 粉丝1
  • 关注0
  • 发帖数1
  • 铜币12枚
  • 威望12点
  • 贡献0点
写私信
阅读：2349回复：0

[CSS3技术]纯HTML+CSS实现阿童木头像

楼主#
更多 发布于：2015-04-25 07:10
[tr][td] 他有十万马力，能上天能入地；他分辨善恶，是勇敢正义化身；1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说，将阿童木生日定在2003年4月7日。你的童年记忆中，有这个发型尖尖的少年吗？

　　正好最近学习CSS3，就准备练练手，画一个阿童木的头像。实用性不是很大，主要为练习HTML+CSS，也是为了打发时间和磨练耐心。

　　先上最终效果图：

图片：094548v8z588vvgk5cz8ac.png


　　在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴影；background（linear-gradient）—渐变；transform—旋转和变换；animation —动画，技术点不是很多，主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性，代码比较多。




<div class="blockcode"><div id="code_vFB"><ol>
纯CSS**
* {
 margin: 0;
 padding: 0;
 }

 .outer-circle {
 position: absolute;
 top: 32px;
 left: 44px;
 width: 289px;
 height: 289px;
 border: 4px solid #75BD4F;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 }

 .inner-circle {
 position: relative;
 width: 269px;
 height: 269px;
 border: 10px solid #F5F910;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #73BF43;
 }

 .inner-circle div {
 position: absolute;
 }

 .inner-circle-light {
 top: 41px;
 left: 35px;
 -moz-box-shadow: 26px 26px 29px 37px #fff;
 -webkit-box-shadow: 26px 26px 29px 37px #fff;
 box-shadow: 26px 26px 29px 37px #fff;
 }

 .header-top {
 top: 11px;
 right: 2px;
 z-index: 100;
 width: 180px;
 height: 90px;
 -moz-border-radius: 90px 90px 0 0;
 -webkit-border-radius: 90px 90px 0 0;
 border-radius: 90px 90px 0 0;
 background-color: #000;
 -moz-transform: rotate(32deg);
 -ms-transform: rotate(32deg);
 -o-transform: rotate(32deg);
 -webkit-transform: rotate(32deg);
 transform: rotate(32deg);
 }

 .header-left {
 top: -20px;
 left: 37px;
 width: 114px;
 height: 228px;
 -moz-border-radius: 228px 0 0 228px;
 -webkit-border-radius: 228px 0 0 228px;
 border-radius: 228px 0 0 228px;
 background-color: #000;
 -moz-transform: rotate(26deg);
 -ms-transform: rotate(26deg);
 -o-transform: rotate(26deg);
 -webkit-transform: rotate(26deg);
 transform: rotate(26deg);
 }

 .hair-left-1 {
 top: 15px;
 left: 53px;
 z-index: 55;
 width: 85px;
 height: 23px;
 -webkit-border-top-left-radius: 30px 180px;
 border-top-left-radius: 30px 180px;
 -webkit-border-bottom-left-radius: 30px 80px;
 border-bottom-left-radius: 30px 80px;
 background-color: #000;
 -moz-transform: rotate(-74deg) skew(-42deg, 23deg);
 -ms-transform: rotate(-74deg) skew(-42deg, 23deg);
 -o-transform: rotate(-74deg) skew(-42deg, 23deg);
 -webkit-transform: rotate(-74deg) skew(-42deg, 23deg);
 transform: rotate(-74deg) skew(-42deg, 23deg);
 }

 .hair-left-2 {
 top: -20px;
 left: 99px;
 z-index: 60;
 width: 49px;
 height: 37px;
 background-color: #000;
 -moz-transform: rotate(-51deg) skew(-43deg, 0deg);
 -ms-transform: rotate(-51deg) skew(-43deg, 0deg);
 -o-transform: rotate(-51deg) skew(-43deg, 0deg);
 -webkit-transform: rotate(-51deg) skew(-43deg, 0deg);
 transform: rotate(-51deg) skew(-43deg, 0deg);
 }

 .hair-right-1 {
 top: 70px;
 right: 1px;
 z-index: 60;
 width: 81px;
 height: 85px;
 -webkit-border-top-right-radius: 26px 120px;
 border-top-right-radius: 26px 120px;
 background-color: black;
 -moz-transform: rotate(1deg) skew(-51deg, 0deg);
 -ms-transform: rotate(1deg) skew(-51deg, 0deg);
 -o-transform: rotate(1deg) skew(-51deg, 0deg);
 -webkit-transform: rotate(1deg) skew(-51deg, 0deg);
 transform: rotate(1deg) skew(-51deg, 0deg);
 }

 .hair-right-2 {
 width: 60px;
 height: 10px;
 -webkit-border-bottom-left-radius: 100%;
 border-bottom-left-radius: 100%;
 background-color: rgba(0,0,0,0.2);
 }

 .hair-light-1 {
 top: 30px;
 right: 45px;
 z-index: 105;
 width: 57px;
 height: 17px;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 background-color: white;
 -moz-transform: rotate(39deg);
 -ms-transform: rotate(39deg);
 -o-transform: rotate(39deg);
 -webkit-transform: rotate(39deg);
 transform: rotate(39deg);
 }

 .hair-light-1-over {
 top: 32px;
 right: 38px;
 z-index: 105;
 width: 83px;
 height: 21px;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 background-color: black;
 -moz-transform: rotate(41deg);
 -ms-transform: rotate(41deg);
 -o-transform: rotate(41deg);
 -webkit-transform: rotate(41deg);
 transform: rotate(41deg);
 }

 .hair-light-2 {
 top: 16px;
 right: 104px;
 z-index: 105;
 width: 4px;
 height: 2px;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 background-color: white;
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
 }

 .ear {
 top: 141px;
 right: 36px;
 z-index: 110;
 width: 49px;
 height: 48px;
 border: 2px solid #000;
 border-bottom-width: 1px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #F6C6B0;
 -moz-box-shadow: -4px 0 0 0 #de9876 inset;
 -webkit-box-shadow: -4px 0 0 0 #de9876 inset;
 box-shadow: -4px 0 0 0 #de9876 inset;
 -moz-transform: rotate(56deg) scaleY(1.4);
 -ms-transform: rotate(56deg) scaleY(1.4);
 -o-transform: rotate(56deg) scaleY(1.4);
 -webkit-transform: rotate(56deg) scaleY(1.4);
 transform: rotate(56deg) scaleY(1.4);
 }

 .ear-inner-1 {
 top: 22px;
 left: 22px;
 z-index: 70;
 width: 9px;
 height: 5px;
 border-top: 1px solid #110b00;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -moz-transform: rotate(-6deg);
 -ms-transform: rotate(-6deg);
 -o-transform: rotate(-6deg);
 -webkit-transform: rotate(-6deg);
 transform: rotate(-6deg);
 }

 .ear-inner-2 {
 top: 19px;
 left: 18px;
 width: 14px;
 height: 7px;
 border-top: 2px solid #110b00;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -moz-box-shadow: 0px 2px 0 0 #de9876 inset;
 -webkit-box-shadow: 0px 2px 0 0 #de9876 inset;
 box-shadow: 0px 2px 0 0 #de9876 inset;
 -moz-transform: rotate(-91deg);
 -ms-transform: rotate(-91deg);
 -o-transform: rotate(-91deg);
 -webkit-transform: rotate(-91deg);
 transform: rotate(-91deg);
 }

 .ear-light {
 top: 21px;
 right: 34px;
 z-index: 105;
 width: 17px;
 height: 6px;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 background-color: #FFF;
 -moz-transform: rotate(89deg);
 -ms-transform: rotate(89deg);
 -o-transform: rotate(89deg);
 -webkit-transform: rotate(89deg);
 transform: rotate(89deg);
 }

 .ear-over {
 bottom: -44px;
 left: -33px;
 z-index: 55;
 width: 69px;
 height: 59px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #f6c6b0;
 -moz-transform: rotate(26deg);
 -ms-transform: rotate(26deg);
 -o-transform: rotate(26deg);
 -webkit-transform: rotate(26deg);
 transform: rotate(26deg);
 }

 .face-main {
 top: 30px;
 left: 35px;
 z-index: 50;
 width: 180px;
 height: 188px;
 -moz-border-radius: 90px;
 -webkit-border-radius: 90px;
 border-radius: 90px;
 background-color: #F6C6B0;
 -moz-box-shadow: 3px -3px 0 0 #fff inset;
 -webkit-box-shadow: 3px -3px 0 0 #fff inset;
 box-shadow: 3px -3px 0 0 #fff inset;
 }

 .face-top {
 top: 61px;
 right: 75px;
 z-index: 105;
 width: 111px;
 height: 46px;
 -moz-border-radius: 50% 50% 26px 0;
 -webkit-border-radius: 50% 50% 26px 0;
 border-radius: 50% 50% 26px 0;
 background-color: #f6c6b0;
 -moz-transform: rotate(37deg);
 -ms-transform: rotate(37deg);
 -o-transform: rotate(37deg);
 -webkit-transform: rotate(37deg);
 transform: rotate(37deg);
 }

 .face-right-1 {
 top: 115px;
 right: 71px;
 z-index: 105;
 width: 68px;
 height: 62px;
 -moz-border-radius: 100% 0 0;
 -webkit-border-radius: 100% 0 0;
 border-radius: 100% 0 0;
 background-color: #f6c6b0;
 -moz-transform: rotate(99deg);
 -ms-transform: rotate(99deg);
 -o-transform: rotate(99deg);
 -webkit-transform: rotate(99deg);
 transform: rotate(99deg);
 }

 .face-bottom-1 {
 bottom: 42px;
 left: 45px;
 z-index: 40;
 width: 72px;
 height: 52px;
 -webkit-border-bottom-left-radius: 70px 40px;
 -webkit-border-top-left-radius: 14px 11px;
 border-top-left-radius: 14px 11px;
 border-bottom-left-radius: 70px 40px;
 background-color: #000;
 }

 .face-bottom-1-over {
 bottom: 45px;
 left: 48px;
 z-index: 55;
 width: 69px;
 height: 47px;
 -webkit-border-bottom-left-radius: 70px 40px;
 -webkit-border-top-left-radius: 14px 11px;
 border-top-left-radius: 14px 11px;
 border-bottom-left-radius: 70px 40px;
 background-color: #f6c6b0;
 -moz-box-shadow: 3px 0px 0 0 #fff inset;
 -webkit-box-shadow: 3px 0px 0 0 #fff inset;
 box-shadow: 3px 0px 0 0 #fff inset;
 }

 .face-bottom-2 {
 right: 97px;
 bottom: 44px;
 z-index: 55;
 width: 43px;
 height: 31px;
 -webkit-border-bottom-right-radius: 70px 40px;
 border-bottom-right-radius: 70px 40px;
 background-color: #000;
 -moz-transform: rotate(-4deg) skew(-49deg, 0deg);
 -ms-transform: rotate(-4deg) skew(-49deg, 0deg);
 -o-transform: rotate(-4deg) skew(-49deg, 0deg);
 -webkit-transform: rotate(-4deg) skew(-49deg, 0deg);
 transform: rotate(-4deg) skew(-49deg, 0deg);
 }

 .face-bottom-2-over {
 right: 99px;
 bottom: 46px;
 z-index: 56;
 width: 43px;
 height: 31px;
 -webkit-border-bottom-right-radius: 70px 40px;
 border-bottom-right-radius: 70px 40px;
 background-color: #f6c6b0;
 -moz-box-shadow: -6px 2px 0 0 #de9876 inset;
 -webkit-box-shadow: -6px 2px 0 0 #de9876 inset;
 box-shadow: -6px 2px 0 0 #de9876 inset;
 -moz-transform: rotate(-3deg) skew(-49deg, 0deg);
 -ms-transform: rotate(-3deg) skew(-49deg, 0deg);
 -o-transform: rotate(-3deg) skew(-49deg, 0deg);
 -webkit-transform: rotate(-3deg) skew(-49deg, 0deg);
 transform: rotate(-3deg) skew(-49deg, 0deg);
 }

 .face-light-1 {
 right: 127px;
 bottom: 95px;
 z-index: 150;
 width: 6px;
 height: 6px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 }

 .face-light-2 {
 bottom: 82px;
 left: 58px;
 z-index: 150;
 width: 4px;
 height: 4px;
 -moz-border-radius: 50%;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 background-color: #fff;
 }

 .chin {
 bottom: 39px;
 left: 111px;
 z-index: 70;
 width: 11px;
 height: 12px;
 border: 2px solid #000;
 border-top-color: #f6c6b0;
 border-left-color: #f6c6b0;
 -webkit-border-bottom-right-radius: 6px;
 border-bottom-right-radius: 6px;
 background-color: #f6c6b0;
 -moz-transform: rotate(34deg) skew(-9deg, 0deg);
 -ms-transform: rotate(34deg) skew(-9deg, 0deg);
 -o-transform: rotate(34deg) skew(-9deg, 0deg);
 -webkit-transform: rotate(34deg) skew(-9deg, 0deg);
 transform: rotate(34deg) skew(-9deg, 0deg);
 }

 .eye-right {
 top: 97px;
 left: 103px;
 z-index: 110;
 width: 39px;
 height: 67px;
 border: 1px solid #000;
 border-top-width: 2px;
 -moz-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
 -webkit-border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
 border-radius: 24px 43px 34px 28px / 34px 71px 34px 81px;
 background-color: #F8FAF7;
 -moz-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
 -webkit-box-shadow: 0px 5px 0 0 #d5d9e2 inset;
 box-shadow: 0px 5px 0 0 #d5d9e2 inset;
 }

 .eye-right-inner {
 right: 0;
 bottom: 3px;
 z-index: 115;
 width: 30px;
 height: 52px;
 -moz-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
 -webkit-border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
 border-radius: 32px 43px 28px 48px / 47px 55px 45px 75px;
 background-color: #000;
 }

 .eye-right-light1 {
 top: 19px;
 right: 0;
 z-index: 120;
 width: 19px;
 height: 10px;
 -moz-border-radius: 100%;
 -webkit-border-radius: 100%;
 border-radius: 100%;
 background-color: #FFF;
 -moz-animation: eye-flash 0.2s linear 0.1s infinite normal;
 -o-animation: eye-flash 0.2s linear 0.1s infinite normal;
 -webkit-animation: eye-flash 0.2s linear 0.1s infinite normal;
 -moz-transform: rotate(41deg);
 -ms-transform: rotate(41deg);
 -o-transform: rotate(41deg);
 -webkit-transform: rotate(41deg);
 transform: rotate(41deg);
 animation: eye-flash 0.2s linear 0.1s infinite normal;
 }

 @-webkit-keyframes eye-flash {
 0% {
 top: 19px;
 }

 100% {
 top: 21px;
 }
 }

 @-moz-keyframes eye-flash {
 0% {
 top: 19px;
 }

 100% {
 top: 20px;
 }
 }

 @-ms-keyframes eye-flash {
 0% {
 top: 19px;
 }

 100% {
 top: 20px;
 }
 }

 @keyframes eye-flash {
 0% {
 top: 19px;
 }

 100% {
 top: 20px;
 }
 }

 .eye-right-light2 {
 bottom: 8px;
 left: 9px;
 z-index: 120;
 width: 14px;
 height: 7px;
 -webkit-border-bottom-right-radius: 100%;
 border-bottom-right-radius: 100%;
 background-color: #FFF;
 -moz-transform: rotate(-39deg);
 -ms-transform: rotate(-39deg);
 -o-transform: rotate(-39deg);
 -webkit-transform: rotate(-39deg);
 transform: rotate(-39deg);
 }

 .eye-right-eyelash1 {
 top: 9px;
 left: -3px;
 width: 2px;
 height: 4px;
 background-color: #000;
 -moz-transform: rotate(-54deg);
 -ms-transform: rotate(-54deg);
 -o-transform: rotate(-54deg);
 -webkit-transform: rotate(-54deg);
 transform: rotate(-54deg);
 }

 .eye-right-eyelash2 {
 top: 1px;
 left: 1px;
 width: 2px;
 height: 5px;
 background-color: #000;
 -moz-transform: rotate(-33deg);
 -ms-transform: rotate(-33deg);
 -o-transform: rotate(-33deg);
 -webkit-transform: rotate(-33deg);
 transform: rotate(-33deg);
 }

 .eye-right-eyelash3 {
 top: -8px;
 left: 8px;
 width: 2px;
 height: 7px;
 background-color: #000;
 -moz-transform: rotate(-21deg);
 -ms-transform: rotate(-21deg);
 -o-transform: rotate(-21deg);
 -webkit-transform: rotate(-21deg);
 transform: rotate(-21deg);
 }

 .eye-right-eyelash4 {
 top: -6px;
 left: 21px;
 width: 2px;
 height: 6px;
 background-color: #000;
 -moz-transform: rotate(11deg);
 -ms-transform: rotate(11deg);
 -o-transform: rotate(11deg);
 -webkit-transform: rotate(11deg);
 transform: rotate(11deg);
 }

 .eye-right-eyelash5 {
 top: 1px;
 right: 8px;
 width: 2px;
 height: 6px;
 background-color: #000;
 -moz-transform: rotate(14deg);
 -ms-transform: rotate(14deg);
 -o-transform: rotate(14deg);
 -webkit-transform: rotate(14deg);
 transform: rotate(14deg);
 }

 .eye-left {
 top: 114px;
 left: 45px;
 z-index: 110;
 width: 19px;
 height: 63px;
 border: 1px solid #000;
 border-top-width: 2px;
 -moz-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
 -webkit-border-radius: 29px 28px 33px / 97px 111px 40px 90px;
 border-radius: 29px 28px 33px / 97px 111px 40px 90px;
 background-color: #F8FAF7;
 -moz-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
 -webkit-box-shadow: 0px 6px 0 0 #d5d9e2 inset;
<font size="3"> box-sha[/td][/tr]
喜欢48 评分0
回复
游客
关于UPUPW帮助中心技术问答手机浏览相关链接

©2013-2023 UPUPW绿色服务器平台 保留所有权利. 官方唯一网址UPUPW.NET 请勿用此环境运行非法站点，UPUPW不承担相关责任！ [京] ICP备07028424号-2

UPUPW ANK V1.1.8正式版驱动 - 页面执行时间0.033785秒

返回顶部