他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫曾说,将阿童木生日定在2003年4月7日。你的童年记忆中,有这个发型尖尖的少年吗?
目前创新互联建站已为上千多家的企业提供了网站建设、域名、虚拟空间、网站运营、企业网站设计、花溪网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
正好最近学习CSS3,就准备练练手,画一个阿童木的头像。实用性不是很大,主要为练习HTML+CSS,也是为了打发时间和磨练耐心。
先上最终效果图:
在里面主要用的了CSS中的几个属性:position—定位;border-radius—圆角;box-shadow—阴 影;background(linear-gradient)—渐变;transform—旋转和变换;animation —动画,技术点不是很多,主要是细心和耐心。还是直接上最终源码吧。由于考虑浏览器的CSS兼容性,代码比较多。
纯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
文章题目:纯HTML+CSS实现阿童木头像
分享地址:http://www.mswzjz.cn/qtweb/news33/407533.html攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 贝锐智能