国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人(詳解步驟)

Codeing_ls / 2625人閱讀

摘要:僅僅使用作為身體的布局,用的各種和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。有的同學說,用不是能畫得更逼真而且更簡單嗎這點我也非常贊同,但我的理由還是,那就沒意思了。這次寫的詳細一點,把各個部位都拆出來分析。收工歡迎大家吐槽

僅僅使用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/54320.html

相關文章

  • 二次元的CSS】—— DIV + CSS3 咸蛋超人詳解步驟

    摘要:僅僅使用作為身體的布局,用的各種和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。有的同學說,用不是能畫得更逼真而且更簡單嗎這點我也非常贊同,但我的理由還是,那就沒意思了。這次寫的詳細一點,把各個部位都拆出來分析。收工歡迎大家吐槽 僅僅使用div作為身體的布局,用css3的各種transform和圓角屬性來繪制各部位的形狀,當然也不會使用任何圖片哦。那就沒意思了。有的同學說,用c...

    mayaohua 評論0 收藏0
  • SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

    摘要:層疊即表示允許以多種方式來描述樣式,一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間,而不是立即生效。比如,將元素的顏色從白色改為黑色,通常這個改變是立即生效的,使用后,將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評論0 收藏0
  • 二次元的CSS】—— DIV + CSS3 大白(詳解步驟

    摘要:原本自己也想畫大白,正巧看到一位同學也用相同的方法畫了。且細節相當到位。同時,我也希望有更多的同學發揮自己的想象力,來找個東西畫畫。如果看過我前幾次的分享,肯定能馬上想到大白的各個部位是怎么實現的。 原本自己也想畫大白,正巧看到一位同學(github:https://github.com/shiyiwang)也用相同的方法畫了。 且細節相當到位。所以我就fork了一下,在此我也分享一下...

    littleGrow 評論0 收藏0
  • 二次元的CSS】—— DIV + CSS3 大白(詳解步驟

    摘要:原本自己也想畫大白,正巧看到一位同學也用相同的方法畫了。且細節相當到位。同時,我也希望有更多的同學發揮自己的想象力,來找個東西畫畫。如果看過我前幾次的分享,肯定能馬上想到大白的各個部位是怎么實現的。 原本自己也想畫大白,正巧看到一位同學(github:https://github.com/shiyiwang)也用相同的方法畫了。 且細節相當到位。所以我就fork了一下,在此我也分享一下...

    lunaticf 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<