摘要:僅僅使用作為身體的布局,用的各種和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。有的同學說,用不是能畫得更逼真而且更簡單嗎這點我也非常贊同,但我的理由還是,那就沒意思了。這次寫的詳細一點,把各個部位都拆出來分析。收工歡迎大家吐槽
僅僅使用div作為身體的布局,用css3的各種transform和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。那就沒意思了。
有的同學說,用canvas不是能畫得更逼真而且更簡單嗎?這點我也非常贊同,但我的理由還是,那就沒意思了。
這次寫的詳細一點,把各個部位都拆出來分析。
第一步:頭部輪廓GitHub傳送門:https://github.com/lancer07/css3Ultraman
.ultraman header { border: 7px solid #000; border-top: 15px solid #000; width: 200px; height: 200px; border-radius: 50% 50% 60% 60%; position: absolute; background: #fff; }第二步:就算作是頭發吧
.ultraman header .hair { position: absolute; top: -40px; left: 80px; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 140px solid #000; border-radius: 30% 30% 50% 50%; }第三步:眼睛
因為我是用less寫的嘛,所以先定義了一個眼睛的類,然后再生成2個眼睛
.eye(@l,@r,@deg){ border:5px solid #000; width:70px; height:70px; background:#ffc30a; border-radius:@l @r; transform:rotate(@deg); position:absolute; top:60px; } .left_eye{ .eye(50%,80%,-15deg); left:10px; } .right_eye{ .eye(80%,50%,15deg); right:10px; }第四步:耳朵
.ear(@deg){ width:20px; height:50px; border:5px solid #000; position:absolute; top:70px; z-index:-1; transform:rotate(@deg); background:#fff; } .left_ear{ .ear(-7deg); left:-20px } .right_ear{ .ear(7deg); right:-20px }第五步:小身體
身上有個燈,時間到了,會嘀嘟嘀嘟叫的,所以加一個動畫效果
@keyframes jump{ 0%{ background:#48e1e7; } 50%{ background:#961e1e; } 100%{ background:#48e1e7; } } .body{ width:100px; height:80px; background:#fff; border:7px solid #000; position:absolute; top:180px; left:50px; border-radius:0 0 20% 20%; z-index:-1; .light{ width:40px; height:40px; border:3px solid #000; position:relative; top:20px; left:30px; background:red; transform:rotate(-45deg); span{ width:8px; height:8px; border:2px solid #000; background:#48e1e7; display:block; position:absolute; left:3px; top:26px; border-radius:50%; z-index:2; animation:jump 0.5s infinite; } } }第六步:手
手只要旋轉一下就好了,比出一個十字
.hand{ width:30px; height:100px; border-radius:60% 60% 50% 50%; border:7px solid #000; position:absolute; background:#fff; } .left_hand{ .hand; top:160px; left:30px; } .right_hand{ .hand; top:160px; left:90px; transform:rotate(-90deg); }第七步:褲子
.trousers{ border:7px solid #000; position:absolute; background:red; width:100px; height:45px; top:240px; left:50px; z-index:-2; border-radius:0 0 15% 15%; }第八步:腿
至于egg是什么, 我就不贅述了。
.footer{ width:34px; height:80px; border-radius:50% 50% 60% 60%; border:7px solid #000; position:absolute; background:#fff; z-index:-3; } .left_footer{ .footer; left:46px; top:260px; transform:rotate(20deg); } .right_footer{ .footer; right:20px; top:270px; transform:rotate(-50deg); } .egg{ background:#75d8f9; width: 18px; height: 30px; top: 286px; left: 97px; position: absolute; border-radius: 50%; border-top:7px solid #000; }收工
歡迎大家吐槽
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115236.html
摘要:僅僅使用作為身體的布局,用的各種和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。有的同學說,用不是能畫得更逼真而且更簡單嗎這點我也非常贊同,但我的理由還是,那就沒意思了。這次寫的詳細一點,把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局,用css3的各種transform和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。那就沒意思了。有的同學說,用c...
摘要:層疊即表示允許以多種方式來描述樣式,一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個改變是立即生效的,使用后,將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...
摘要:原本自己也想畫大白,正巧看到一位同學也用相同的方法畫了。且細節相當到位。同時,我也希望有更多的同學發揮自己的想象力,來找個東西畫畫。如果看過我前幾次的分享,肯定能馬上想到大白的各個部位是怎么實現的。 原本自己也想畫大白,正巧看到一位同學(github:https://github.com/shiyiwang)也用相同的方法畫了。 且細節相當到位。所以我就fork了一下,在此我也分享一下...
摘要:原本自己也想畫大白,正巧看到一位同學也用相同的方法畫了。且細節相當到位。同時,我也希望有更多的同學發揮自己的想象力,來找個東西畫畫。如果看過我前幾次的分享,肯定能馬上想到大白的各個部位是怎么實現的。 原本自己也想畫大白,正巧看到一位同學(github:https://github.com/shiyiwang)也用相同的方法畫了。 且細節相當到位。所以我就fork了一下,在此我也分享一下...
閱讀 2576·2021-10-25 09:45
閱讀 1238·2021-10-14 09:43
閱讀 2297·2021-09-22 15:23
閱讀 1519·2021-09-22 14:58
閱讀 1933·2019-08-30 15:54
閱讀 3539·2019-08-30 13:00
閱讀 1354·2019-08-29 18:44
閱讀 1570·2019-08-29 16:59