建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
純HTML+CSS實(shí)現(xiàn)阿童木頭像
他有十萬(wàn)馬力，能上天能入地；他分辨善惡，是勇敢正義化身；1963年，他登上熒幕，在日本創(chuàng)下了未曾有過(guò)的高收視率……他叫阿童木，一個(gè)純真、善良、勇 敢的機(jī)器娃娃?！鞍⑼局浮笔众Ｖ蜗x(chóng)曾說(shuō)，將阿童木生日定在2003年4月7日。你的童年記憶中，有這個(gè)發(fā)型尖尖的少年嗎？
目前創(chuàng)新互聯(lián)建站已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、花溪網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
正好最近學(xué)習(xí)CSS3，就準(zhǔn)備練練手，畫(huà)一個(gè)阿童木的頭像。實(shí)用性不是很大，主要為練習(xí)HTML+CSS，也是為了打發(fā)時(shí)間和磨練耐心。
先上最終效果圖：
在里面主要用的了CSS中的幾個(gè)屬性：position—定位；border-radius—圓角；box-shadow—陰 影；background（linear-gradient）—漸變；transform—旋轉(zhuǎn)和變換；animation —?jiǎng)赢?huà)，技術(shù)點(diǎn)不是很多，主要是細(xì)心和耐心。還是直接上最終源碼吧。由于考慮瀏覽器的CSS兼容性，代碼比較多。
純CSS漫畫(huà) - * {
- 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
當(dāng)前名稱(chēng)：純HTML+CSS實(shí)現(xiàn)阿童木頭像
本文來(lái)源：http://fisionsoft.com.cn/article/coiocse.html
