這篇文章給大家分享一組純 CSS 繪制的《辛普森一家》人物頭像。《辛普森一家》（The Simpsons）是馬特·格勒寧為美國(guó)?？怂箯V播公司創(chuàng)作的一部動(dòng)畫(huà)情景喜劇。該劇通過(guò)對(duì)霍默、瑪琦、巴特、莉薩和瑪吉一家五口生活的描繪，用搞笑的方式自我嘲諷了美國(guó)的文化、社會(huì)、電視以及人類(lèi)境況的諸多方面。
溫馨提示：為保證最佳的效果，請(qǐng)?jiān)?Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器中瀏覽。
源碼下載 在線演示
辛普森一家中的父親，一人養(yǎng)著全家。全名是 Homer Jay Simpson。
Homer 人物頭像 HTML 代碼：
<div class="head"> <!-- Hair and top of head --> <div class="hair1"></div> <div class="hair2"></div> <div class="body head-top"></div> <div class="no-border body head-main"></div> <!-- The 'M' above the ear --> <div class="no-border m1"></div> <div class="no-border m2"></div> <div class="no-border m3"></div> <div class="no-border m4"></div> <!-- The neck parts --> <div class="no-border neck1"></div> <div class="body neck2"></div> <!-- The ear --> <div class="body ear"> <div class="no-border inner1"></div> <div class="no-border inner2"></div> <div class="no-border body clHomer 人物頭像CSS 代碼如下：
#homer *{ position: absolute; box-sizing:content-box; -moz-box-sizing:content-box;}#homer{ position: relative; width: 94px; height: 133px; margin: 0 auto;}#homer .head *{ border: 1px solid #110b00;}#homer .head .no-border{ border: none;}#homer .head .body{ background: #fbd800;}#homer .head .hair1{ top: 14px; left: 0px; height:13px; width:22px; border-radius: 22px 22px 0 0; -moz-border-radius: 22px 22px 0 0; -webkit-border-radius: 22px 22px 0 0; background: transparent; -webkit-transform: rotate(-44deg); -ms-transform: rotate(-44deg); transform: rotate(-44deg); border-bottom: none;}#homer .head .hair2{ top: 8px; left: 9px; height:16px; width:26px; border-radius: 32px 32px 0 0; -moz-border-radius: 32px 32px 0 0; -webkit-border-radius: 32px 32px 0 0; background: transparent; -webkit-transform: rotate(-27deg); -ms-transform: rotate(-27deg); transform: rotate(-27deg); border-bottom: none;}#homer .head .head-top{ top: 15px; left: 2px; width: 65px; height: 62px; border-bottom: none; -webkit-transform: rotate(-24deg); -ms-transform: rotate(-24deg); transform: rotate(-24deg); -moz-border-radius: 43% 44% 0 0; -webkit-border-radius: 43% 44% 0 0; border-radius: 43% 44% 0 0; -webkit-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1); -moz-box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1); box-shadow: inset 8px 12px 0px -12px rgba(247,254,140,1), inset 13px 3px 0px -11px rgba(247,254,140,1), inset -2px 0px 0px 0px rgba(229,158,4,1);}#homer .head .head-main{ top: 40px; left: 17px; width: 48px; height: 62px; -webkit-transform: rotate(-24deg); -ms-transform: rotate(-24deg); transform: rotate(-24deg);}#homer .head .m1, #homer .head .m2, #homer .head .m3, #homer .head .m4{ width: 1px; height: 14px; background: #110b00;}#homer .head .m1{ top: 77px; left: 9px; -webkit-transform: rotate(-13deg); -ms-transform: rotate(-13deg); transform: rotate(-13deg);}#homer .head .m2{ top: 76px; left: 12px; height: 12px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}#homer .head .m3{ top: 71px; left: 16px; height: 15px; -webkit-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg);}#homer .head .m4{ top: 70px; left: 21px; -webkit-transform: rotate(-39deg); -ms-transform: rotate(-39deg); transform: rotate(-39deg);}#homer .head .ear{ top: 90px; left: 14px; width: 11px; height: 13px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}#homer .head .ear .inner1{ top: 3px; left: 2px; width: 7px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border-top: 1px solid #110b00; -webkit-transform: rotate(-21deg); -ms-transform: rotate(-21deg); transform: rotate(-21deg);}#homer .head .ear .inner2{ top: 3px; left: 4px; width: 7px; height: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border-top: 1px solid #110b00; -webkit-transform: rotate(-109deg); -ms-transform: rotate(-109deg); transform: rotate(-109deg);}#homer .head .ear .clip{ top: 1px; left: 8px; width: 5px; height: 10px;}#homer .head .right-eye{ top: 48px; left: 48px; width: 31px; height: 31px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #ffffff; box-shadow: -2px -1px 0px 0px rgba(247,254,140,1); overflow: hidden;}#homer .head .right-eye .right-eye-pupil{ top: 11px; left: 20px; width: 4px; height: 4px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #110b00;}#homer .head .left-eye{ top: 51px; left: 23px; width: 31px; height: 31px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #ffffff; box-shadow: -1px -1px 0px 0px rgba(247,254,140,1); overflow: hidden;}#homer .head .left-eye .left-eye-pupil{ top: 13px; left: 11px; width: 4px; height: 4px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #110b00;}#homer .head .left-eye .eyelid-top{ top: -21px; left: 0px; width: 30px; height: 20px; border-bottom: 1px solid #110b00; border-radius: 50% 50% 0 0; -webkit-animation-name: homerlefteyelidtop; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-play-state: running; animation-name: homerlefteyelidtop; animation-duration: 10s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-play-state: running;}#homer .head .left-eye .eyelid-bottom{ bottom: -11px; left: 0px; width: 30px; height: 10px; border-top: 1px solid #110b00; border-radius: 0 0 50% 50%; -webkit-animation-name: homerlefteyelidbottom; -webkit-animation-duration: 10s; -webkit-animation-timing-function: linear; -
新聞熱點(diǎn)
疑難解答
圖片精選
