近在網上看到有人用CSS3寫了一個可愛的小黃人,就自己也試試看,下面是代碼,大家可以看看效果,很好玩。純屬娛樂!注:不兼容ie9以下瀏覽器。
效果圖:
代碼如下
html結構代碼:
css樣式代碼(樣式有點多,需要代碼的可以私聊我!):
如果內心明顯感覺不安,就不要看了。
3.Eyes and Goaale護目鏡。Eyes由鞏膜sclera,瞳&孔pupil組成。在HTMl中,都用<div class=""></div>表示。CSS中從goggle-strap護目鏡帶,goggle-frame護目鏡架,.eye{}.pupil{}.dot{}等方面。去掉<div class="goggle-frame left">后成這樣,goggle-strap
link是→去掉<div class="goggle-frame left">后成這樣,goggle-strap link是→
4.Mouth。<div class="mouth"></div>一行搞定,$mouth-width:60px;鎖定嘴巴寬度,top left margin-left height 定位;border邊框 bottom底 radius半徑 shadow影子 都在.mouth{ }標簽下面。
5. dungarees。front前面 pocket口袋strap帶子,數條<div class=""></div>整個包含在<div class="minion-body"></div>中。
6.LOGO。LOGO整體在minion-bod的class,<div class="logo"><span></span></div>中的<span></span>標簽巧妙地將logo切分。
7.wrist。<div class="wrist back left"></div>注意區分front和back。
如果明顯感到不適,就不要看了。
人生苦短,勤勤懇懇是唯一答案。
測試三連?
1.整個小黃人包含在div的container中,請寫出container的div標簽;
2.container類的div標簽,包含一個minion類,請寫出minion的div標簽中;
3.小黃人的頭發可以用什么標簽表示?
你以為行了?
疑問三連
張三:這也太難了?
李四:太難了?不想學?UPWork /h到/h不等,你需要的Web Developer都有。網址如下:
https://www.upwork.com.
*請認真填寫需求信息,我們會在24小時內與您取得聯系。