


【二次元的CSS】-- 用 DIV + CSS3 画Hello Kitty(详解步骤)_html/css_WEB-ITnose
原本自己也想画Hello Kitty,正巧看到一位外国友人Lauren McConachie(她的个人网站: http://lorenai.com 。)也用相同的方法画了。 且细节相当到位。在此我也分享一下。(出于尊重原作者的目的,CSS我就不修改了)
GitHub传送门: https://github.com/lancer07/css3HelloKitty
第一步:从头说起
难点是胡须,因为胡须有点弯的,所以每根胡须需要2个元素来实现
<div id="head"> <div id="face"> <div class="lefteye"></div> <div class="righteye"></div> <div class="nose"></div> </div> <div class="leftwhiskers one"> <span></span> </div> <div class="leftwhiskers two"> <span></span> </div> <div class="leftwhiskers three"> <span></span> </div> <div class="rightwhiskers four"> <span></span> </div> <div class="rightwhiskers five"> <span></span> </div> <div class="rightwhiskers six"> <span></span> </div></div>
#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);}
第二步:耳朵
右耳画的比较粗糙,原因是因为马上要画个蝴蝶结啊。
<div id="leftear"> <span></span></div><div id="rightear"></div>
#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;}
第三步:蝴蝶结
<div id="bow"> <div class="left"><span></span></div> <div class="center"></div> <div class="right"><span></span></div></div>
#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;}
第四步:身体
经过前几次的学习之后,画身体应该没什么难度了吧,都是用各种形状的圆组成的。
<div id="body"> <div id="leftarm"><span></span></div> <div id="rightarm"><span></span></div> <div id="torso"> <span class="leftshort"></span> <span class="rightshort"></span> <div class="crotch"></div> </div> <div id="chest"></div> <div id="leftleg"></div> <div id="rightleg"></div></div>
#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;}
收工
欢迎大家吐槽

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...
