【二次元的CSS】—— 用 DIV + CSS3 畫Hello Kitty（詳解步驟）

TesterHome 發布于2019-08-02 15:54 / 3408人閱讀

摘要：原本自己也想畫，正巧看到一位外國友人她的個人網站。也用相同的方法畫了。且細節相當到位。在此我也分享一下。第三步蝴蝶結第四步身體經過前幾次的學習之后，畫身體應該沒什么難度了吧，都是用各種形狀的圓組成的。收工歡迎大家吐槽

原本自己也想畫Hello Kitty，正巧看到一位外國友人Lauren McConachie（她的個人網站： http://lorenai.com。）也用相同的方法畫了。且細節相當到位。在此我也分享一下。（出于尊重原作者的目的，CSS我就不修改了）

GitHub傳送門：https://github.com/lancer07/css3HelloKitty

第一步：從頭說起

難點是胡須，因為胡須有點彎的，所以每根胡須需要2個元素來實現

#head {
    position:absolute;
    top:124px;
    left:130px;
    width:224px;
    height:167px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:160px;
    -webkit-border-radius:160px;
    border-radius:160px;
    z-index:500;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
    -webkit-backface-visibility:hidden;
    
}
.lefteye {
    position:absolute;
    top:97px;
    left:45px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.righteye {
    position:absolute;
    top:93px;
    left:162px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.nose {
    position:absolute;
    top:115px;
    left:100px;
    width:16px;
    height:9px;
    background-color:#FFB827;
    border:6px solid #000;    
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}
.leftwhiskers, .rightwhiskers {
    background-color:#000;
}
.one {
    position:absolute;
    top:96px;
    left:-1px;
    width:20px;
    height:9px;
    -moz-border-radius:0 20px 15px 0;
    -webkit-border-radius:0 20px 15px 0;
    border-radius:0 20px 15px 0;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
.one span {
    display:block;
    position:absolute;
    left:-32px;
    top:4px;
    width:33px;
    height:9px;
    background-color:inherit;
    -moz-border-radius: 35px 10px 10px;
    -webkit-border-radius: 35px 10px 10px;
    border-radius: 35px 10px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two {
    position:absolute;
    top:120px;
    left:6px;
    width:15px;
    height:8px;
    -moz-border-radius:10px 20px 13px 10px;
    -webkit-border-radius:10px 20px 13px 10px;
    border-radius:10px 20px 13px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two span {
    display:block;
    position:absolute;
    top:0px;
    left:-24px;
    height:8px;
    width:25px;
    background-color:inherit;
    -moz-border-radius:10px 0 0 15px;
    -webkit-border-radius:10px 0 0 15px;
    border-radius:10px 0 0 15px;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.three {
    position:absolute;
    top:138px;
    left:20px;
    width:15px;
    height:8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-transform:rotate(-16deg);
    -ms-transform:rotate(-16deg);
    -o-transform:rotate(-16deg);
    -webkit-transform:rotate(-16deg);
}
.three span {
    display:block;
    position:absolute;
    top:5px;
    left:-34px;
    width:37px;
    height:8px;
    background-color:inherit;
    -moz-border-radius:18px 10px 12px;
    -webkit-border-radius:18px 10px 12px;
    border-radius:18px 10px 12px;
    -moz-transform:rotate(-19deg);
    -ms-transform:rotate(-19deg);
    -o-transform:rotate(-19deg);
    -webkit-transform:rotate(-19deg);
}
.four {
    position: absolute;
    top: 82px;
    left: 205px;
    width: 25px;
    height: 8px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform:rotate(-13deg);
    -webkit-transform: rotate(-13deg);    
}
.four span {
    display: block;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 33px;
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 18px 10px 15px;
    -webkit-border-radius: 10px 18px 10px 15px;
    border-radius: 10px 18px 10px 15px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}
.five {
    position: absolute;
    top: 105px;
    left: 211px;    
    width: 22px;
    height: 8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.five span {
    display: block;
    position: absolute;
    top: 2px;
    left: 16px;    
    width: 25px;    
    height: 8px;    
    background-color: inherit;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six {
    position: absolute;
    top: 129px;    
    left: 200px;
    width: 22px;
    height: 8px;
    -moz-border-radius: 20px 10px 10px 18px;
    -webkit-border-radius: 20px 10px 10px 18px;
    border-radius: 20px 10px 10px 18px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six span {
    display: block;
    position: absolute;
    top: 3px;
    left: 18px;
    width: 26px;    
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}

第二步：耳朵

右耳畫的比較粗糙，原因是因為馬上要畫個蝴蝶結啊。

#leftear {
    position:absolute;
    top:-16px;
    left:-3px;
    width:57px;
    height:61px;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(14deg);
    -ms-transform:rotate(14deg);
    -o-transform:rotate(14deg);
    -webkit-transform:rotate(14deg);
    transform:rotate(14deg);
    -webkit-backface-visibility:hidden;
}
#leftear span {
    position:absolute;
    top:2px;
    left:-1px;
    width:68px;
    height:61px;
    background-color:#FFF;
    -moz-border-radius:18px 34px 20px 44px;
    -webkit-border-radius:18px 34px 20px 44px;
    border-radius:18px 34px 20px 44px;
}
#rightear {
    position:absolute;
    top:-27px;
    left:143px;
    width:57px;
    height:61px;
    background-color:#FFF;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(80deg);
    -ms-transform:rotate(80deg);
    -o-transform:rotate(80deg);
    -webkit-transform:rotate(80deg);
    -webkit-backface-visibility:hidden;
}

第三步：蝴蝶結

#bow {
    position:absolute;
    top:134px;
    left:141px;
    z-index:1000;
}
.center {
    position:absolute;
    left:140px;
    width:32px;
    height:35px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    z-index:2;
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
}
.left {
    position:absolute;
    top:-33px;
    left:99px;
    width:46px;
    height:62px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius: 50px 50px 55px 46px;
    -webkit-border-radius: 50px 50px 55px 46px;
    border-radius: 50px 50px 55px 46px;
    -moz-transform:rotate(19deg);
    -ms-transform:rotate(19deg);
    -o-transform:rotate(19deg);
    -webkit-transform:rotate(19deg);
}
.left span {
    position:absolute;
    top:20px;
    left:23px;
    width:15px;
    height:15px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}
.right {
    position:absolute;
    top:0;
    left:164px;
    width:43px;
    height:54px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:78px 48px 60px 63px;
    -webkit-border-radius:78px 48px 60px 63px;
    border-radius:78px 48px 60px 63px;
    -moz-transform:rotate(22deg);
    -ms-transform:rotate(22deg);
    -o-transform:rotate(22deg);
    -webkit-transform:rotate(22deg);
}
.right span {
    position:absolute;
    top:18px;
    left:1px;
    width:15px;
    height:12px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}

第四步：身體

經過前幾次的學習之后，畫身體應該沒什么難度了吧，都是用各種形狀的圓組成的。

#body {
    position:absolute;
    top:295px;
    width:250px;
    height:150px;    
}
#leftarm {
    position:absolute;
    top:-8px;
    left:142px;
    width:40px;
    height:73px;    
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:158px 0 82px 100px;
    -webkit-border-radius:158px 0 82px 100px;
    border-radius:158px 0 82px 100px;
    overflow:hidden;
    -moz-transform:rotate(28deg);
    -ms-transform:rotate(28deg);
    -o-transform:rotate(28deg);
    -webkit-transform:rotate(28deg);
    -webkit-backface-visibility:hidden;
}
#leftarm span {
    position:absolute;
    top:-3px;
    left:1px;
    width:50px;
    height:38px;
    background-color:pink;
    border-bottom:8px solid #000; 
    -webkit-border-top-left-radius: 200px;
    -moz-border-radius-topleft: 200px;
    border-top-left-radius:200px;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
#rightarm {
    position:absolute;
    top: -4px;
    left: 302px;
    height: 70px;
    width: 40px;
    background-color:#FFF;
    border: 8px solid #000;
    -moz-border-radius: 0 158px 100px 81px;
    -webkit-border-radius: 0 158px 100px 81px;
    border-radius: 0 158px 100px 81px;
    overflow: hidden; 
    -moz-transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -o-transform:rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -webkit-backface-visibility:hidden;
}
#rightarm span {
    position:absolute;
    top:-2px;
    left:-4px;
    width:41px;
    height:36px;
    background-color:pink;
    border-bottom:8px solid #000;
    -webkit-border-top-right-radius: 200px;
    -moz-border-radius-topright: 200px;
    border-top-right-radius:200px;
    -moz-transform:rotate(-9deg);
    -ms-transform:rotate(-9deg);
    -o-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);
}
#chest {
    position: absolute;
    top: -32px;    
    left: 213px;
    width: 58px;
    height: 54px;
    background-color:pink;
    border: 8px solid #000;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
#torso {
    position:absolute;
    top:-10px;
    left:165px;
    width:154px;
    height:105px;
    background-color:#F51F27;
    border: 8px solid #000;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    border-radius: 110px 110px 0 0;
    border-bottom:none;
}
#torso .leftshort {
    display:block;
    position:absolute;
    top:92px;
    left:-8px;
    width:73px;
    height:14px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-left:8px solid #000;
    -moz-border-radius:1px 3px 0 30px;
    -webkit-border-radius:1px 3px 0 30px;
    border-radius:1px 3px 0 30px;
    z-index:3;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
#torso .rightshort {
    display:block;
    position:absolute;
    top:97px;
    right:-8px;
    width:73px;
    height:8px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-right:8px solid #000;
    -moz-border-radius:3px 1px 30px 0;
    -webkit-border-radius:3px 1px 30px 0;
    border-radius:3px 1px 30px 0;
    z-index:3;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.crotch {
    position:absolute;
    bottom:-6px;
    left:71px;
    width:12px;
    height:12px;
    background-color:#000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
#leftleg {
    position:absolute;
    top:100px;
    left:165px;
    width:73px;
    height:34px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:0 15px 25px 35px;
    -webkit-border-radius:0 15px 25px 35px;
    border-radius:0 15px 25px 35px;
}
#rightleg {
    position:absolute;
    top:100px;
    left:246px;
    width:73px;
    height:34px;
    background-color:#fff;
    border: 8px solid #000;
    -moz-border-radius:15px 0 35px 25px;
    -webkit-border-radius:15px 0 35px 25px;
    border-radius:15px 0 35px 25px;
}

收工

歡迎大家吐槽

GPU云服務器云服務器二次元api 二次元網站上云服務器 css3 css3氣泡

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54319.html

SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

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

elliott_hu 2019-08-29 13:56 評論0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 畫Hello Kitty（詳解步驟）

摘要：原本自己也想畫，正巧看到一位外國友人她的個人網站。也用相同的方法畫了。且細節相當到位。在此我也分享一下。第三步蝴蝶結第四步身體經過前幾次的學習之后，畫身體應該沒什么難度了吧，都是用各種形狀的圓組成的。收工歡迎大家吐槽原本自己也想畫Hello Kitty，正巧看到一位外國友人Lauren McConachie（她的個人網站： http://lorenai.com。）也用相同的方法畫了。...

wean 2019-08-30 13:00 評論0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

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

Codeing_ls 2019-08-02 15:54 評論0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 畫咸蛋超人（詳解步驟）

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

mayaohua 2019-08-30 13:00 評論0 收藏0