纯HTML+CSS实现阿童木头像
他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说,将阿童木生日定在2003年4月7日。你的童年记忆中,有这个发型尖尖的少年吗?
正好最近学习CSS3,就准备练练手,画一个阿童木的头像。实用性不是很大,主要为练习HTML+CSS,也是为了打发时间和磨练耐心。
先上最终效果图:
正好最近学习CSS3,就准备练练手,画一个阿童木的头像。实用性不是很大,主要为练习HTML+CSS,也是为了打发时间和磨练耐心。
先上最终效果图:
在里面主要用的了CSS中的几个属性:position—定位;border-radius—圆角;box-shadow—阴影;background(linear-gradient)—渐变;transform—旋转和变换;animation —动画,技术点不是很多,主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性,代码比较多。
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <title>纯CSS**</title>
- <style type="text/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;
- box-sha
【纯HTML+CSS实现阿童木头像】相关文章
7. 纯CSS实现3D图像轮转
9. 基于html5 canvas和js实现的水果忍者网页版
10. HTML5组件Canvas实现图像灰度化(步骤+实例效果)
本文来源:https://www.51html5.com/a1091.html
﹝纯HTML+CSS实现阿童木头像﹞相关内容
- 用html5 js实现浏览器全屏
- Node.js实现网游服务器高性能和可扩展
- 8个提高效率的CSS实用工具
- 几个绝对让你疯狂的HTML5和JS实验性展示
- cssSandpaper-兼容IE的CSS3 JavaScript库
- CSS3 HTML5实例四(使用 RGBA 实现透明效果)
- CSS3 HTML5实例五(使用 @Font-Face 实现定制字体)
- 手机版百度首页推情人节特效,HTML5+CSS3 实现网页3D翻转
- jQuery/CSS3实现超酷的动画Tab菜单
- jQuery插件实现css3效果