詳細(xì)介紹一個(gè)利用html+css實(shí)現(xiàn)叮當(dāng)貓的實(shí)例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:33:17

詳細(xì)介紹一個(gè)利用html+css實(shí)現(xiàn)叮當(dāng)貓的實(shí)例代碼

詳細(xì)介紹一個(gè)利用html+css實(shí)現(xiàn)叮當(dāng)貓的實(shí)例代碼:用html畫出來確實(shí)是第一次接觸，所以很樂意去嘗試一下，對于我這種菜鳥，確實(shí)是幫助不少，至少懂得如何去畫一個(gè)簡單的人物形象出來，再加上一些動(dòng)畫效果，就活了，那就更好玩了！OK，開始之前，先把效果圖曬一下：最終效果圖PS:說實(shí)話，我覺得挺可愛的，小時(shí)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀詳細(xì)介紹一個(gè)利用html+css實(shí)現(xiàn)叮當(dāng)貓的實(shí)例代碼:用html畫出來確實(shí)是第一次接觸，所以很樂意去嘗試一下，對于我這種菜鳥，確實(shí)是幫助不少，至少懂得如何去畫一個(gè)簡單的人物形象出來，再加上一些動(dòng)畫效果，就活了，那就更好玩了！OK，開始之前，先把效果圖曬一下：最終效果圖PS:說實(shí)話，我覺得挺可愛的，小時(shí)

用html畫出來確實(shí)是第一次接觸，所以很樂意去嘗試一下，對于我這種菜鳥，確實(shí)是幫助不少，至少懂得如何去畫一個(gè)簡單的人物形象出來，再加上一些動(dòng)畫效果，就活了，那就更好玩了！OK，開始之前，先把效果圖曬一下：

最終效果圖

PS:說實(shí)話，我覺得挺可愛的，小時(shí)候經(jīng)?？炊嗬睞夢，突然感覺很親切，很童真，瞬間年輕了好多，哈哈！

首先，先把HTML結(jié)構(gòu)搭建好：

<p class="wrapper">
 <!--叮當(dāng)貓整體-->
 <p class="doraemon">
 <!--頭部-->
 <p class="head">
 <!--眼睛-->
 <p class="eyes">
 <p class="eye left">
 <!--眼珠-->
 <p class="black bleft"></p>
 </p>
 <p class="eye right">
 <p class="black bright"></p>
 </p>
 </p>
 <!--臉部-->
 <p class="face">
 <!--白色臉底-->
 <p class="white"></p>
 <!--鼻子-->
 <p class="nose">
 <!--鼻子高光部分-->
 <p class="light"></p>
 </p>
 <!--鼻子的豎線-->
 <p class="nose_line"></p>
 <!--嘴巴-->
 <p class="mouth"></p>
 <!--胡須-->
 <p class="whiskers">
 <p class="whisker rTop r160"></p>
 <p class="whisker rMiddle"></p>
 <p class="whisker rBottom r20"></p>
 <p class="whisker lTop r20"></p>
 <p class="whisker lMiddle"></p>
 <p class="whisker lBottom r160"></p>
 </p>
 </p>
 </p>
 <!--脖子和鈴鐺-->
 <p class="choker">
 <!--鈴鐺-->
 <p class="bell">
 <p class="bell_line"></p>
 <p class="bell_circle"></p>
 <p class="bell_under"></p>
 <p class="bell_light"></p>
 </p>
 </p>
 <!--身體-->
 <p class="bodys">
 <!--肚子-->
 <p class="body"></p>
 <!--肚兜-->
 <p class="wraps"></p>
 <!--口袋-->
 <p class="pocket"></p>
 <!--遮住一半口袋，使其呈現(xiàn)半圓-->
 <p class="pocket_mask"></p>
 </p>
 <!--右手-->
 <p class="hand_right">
 <!--手臂-->
 <p class="arm"></p>
 <!--手掌-->
 <p class="circle"></p>
 <!--遮住手臂和身子交接處的線-->
 <p class="arm_rewrite"></p>
 </p>
 <!--左手-->
 <p class="hand_left">
 <p class="arm"></p>
 <p class="circle"></p>
 <p class="arm_rewrite"></p>
 </p>
 <!--腳-->
 <p class="foot">
 <p class="left"></p>
 <p class="right"></p>
 <!--雙腳之間的縫隙-->
 <p class="foot_rewrite"></p>
 </p>
 </p>
</p>

最好先把叮當(dāng)貓的整體結(jié)構(gòu)仔細(xì)研究一下，這對以后想要自己動(dòng)手畫別的人物形象很有幫助，思路會(huì)比較明朗。

接下來，我們按照頭部，脖子，身體，腳部分別進(jìn)行演示。首先將容器wrapper和叮當(dāng)貓整體做一些基本的樣式，叮當(dāng)貓整體doraemon 設(shè)置position為relative，主要是為了便于子元素/后代元素進(jìn)行定位。

.wrapper{
 margin: 50px 0 0 500px;
}
.doraemon{
 position: relative;
}

頭部head的樣式，因?yàn)槎．?dāng)貓的頭部不是正圓，所以寬高有一點(diǎn)偏差，然后使用border-radius將頭部從矩形變成橢圓形，然后再使用徑向漸變從右上角給背景來個(gè)放射性漸變，然后在加個(gè)陰影，使其更有立體感，background：#07bbee;是為了兼容低版本瀏覽器：

.doraemon .head {
 position:relative;
 width: 320px;
 height: 300px;
 border-radius: 150px;
 background: #07bbee;
 background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
 background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
 background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); 
 border:2px solid #555;
 box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}

看看效果到底怎么樣：

什么鬼 ,這么丑，別急，慢慢讓它活過來：

/*臉部*/
 .doraemon .face {
 position: relative; /*讓所有臉部元素可自由定位*/
 z-index: 2; /*臉在頭部背景上面*/
 }
 /*白色臉底*/ 
 .doraemon .face .white {
 width: 265px; /*設(shè)置寬高*/
 height: 195px;
 border-radius: 150px;
 position: absolute; /*進(jìn)行絕對定位*/
 top: 75px;
 left: 25px;
 background: #fff;
 /*此放射漸變也是使臉的左下角暗一些，看上去更真實(shí)*/
 background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
 background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
 background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); 
 }
 /*鼻子*/
 .doraemon .face .nose{
 width:30px;
 height:30px;
 border-radius:15px;
 background:#c93300;
 border:2px solid #000;
 position:absolute;
 top:110px;
 left:140px;
 z-index:3; /*鼻子在白色臉底下面*/
 }
 /*鼻子上的高光*/
 .doraemon .face .nose .light {
 width:10px;
 height:10px;
 border-radius: 5px;
 box-shadow: 19px 8px 5px #fff; /*通過陰影實(shí)現(xiàn)高光*/
 }
 /*鼻子下的線*/
 .doraemon .face .nose_line{
 width:3px;
 height:100px;
 background:#333;
 position:absolute;
 top:143px;
 left:155px;
 z-index:3;
 }
 /*嘴巴*/
 .doraemon .face .mouth{
 width:220px;
 height:400px;
 /*通過底邊框加上圓角模擬微笑嘴巴*/
 border-bottom:3px solid #333;
 border-radius:120px;
 position:absolute;
 top:-160px;
 left:45px;
 }
 /*眼睛*/
 .doraemon .eyes {
 position: relative;
 z-index: 3; /*眼睛在白色臉底下面*/
 }
 /*眼睛共同的樣式*/
 .doraemon .eyes .eye{
 width:72px;
 height:82px;
 background:#fff;
 border:2px solid #000;
 border-radius:35px 35px;
 position:absolute;
 top:40px;
 }
 /*眼珠*/
 .doraemon .eyes .eye .black{
 width:14px;
 height:14px;
 background:#000;
 border-radius:7px;
 position:absolute;
 top:40px;
 }
 .doraemon .eyes .left{
 left:82px;
 }
 .doraemon .eyes .right {
 left: 156px;
 }
 .doraemon .eyes .eye .bleft {
 left: 50px;
 }

 .doraemon .eyes .eye .bright {
 left: 7px;
 }

寫了這么多樣式，結(jié)果是怎么樣的呢：

怎么看都覺得別扭，哦！還差胡須須和白色臉底的邊框呢，咱給補(bǔ)上：

/*胡須背景，主要用于擋住嘴巴的一部分，不要顯得太長*/
 .doraemon .whiskers{
 width:220px;
 height:80px;
 background:#fff;
 border-radius:15px;
 position:absolute;
 top:120px;
 left:45px;
 z-index:2; /*在鼻子和眼睛下面*/
 }
 /*所有胡子的公用樣式*/
 .doraemon .whiskers .whisker {
 width: 60px;
 height: 2px;
 background: #333;
 position: absolute;
 z-index: 2;
 }
 /*右上胡子*/
 .doraemon .whiskers .rTop {
 left: 165px;
 top: 25px;
 }
 /*右中胡子*/
 .doraemon .whiskers .rMiddle {
 left: 167px;
 top: 45px;
 }
 /*右下胡子*/
 .doraemon .whiskers .rBottom {
 left: 165px;
 top: 65px;
 }
 /*左上胡子*/
 .doraemon .whiskers .lTop {
 left: 0;
 top: 25px;
 }
 /*左中胡子*/
 .doraemon .whiskers .lMiddle {
 left: -2px;
 top: 45px;
 }
 /*左下胡子*/
 .doraemon .whiskers .lBottom {
 left: 0;
 top: 65px;
 }
 /*胡子旋轉(zhuǎn)角度*/
 .doraemon .whiskers .r160 {
 -webkit-transform: rotate(160deg);
 -moz-transform: rotate(160deg);
 -ms-transform: rotate(160deg);
 -o-transform: rotate(160deg);
 transform: rotate(160deg);
 }
 .doraemon .whiskers .r20 {
 -webkit-transform: rotate(200deg);
 -moz-transform: rotate(200deg);
 -ms-transform: rotate(200deg);
 -o-transform: rotate(200deg);
 transform: rotate(200deg);
 }

這樣就對了，看著多舒服??！趁熱打鐵，做脖子和身體：

/*圍脖*/
 .doraemon .choker {
 width: 230px;
 height: 20px;
 background: #c40;
 /*線性漸變 讓圍巾看上去更自然*/
 background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
 background: -moz-linear-gradient(center top,#c40,#800400);
 background: -ms-linear-gradient(center top,#c40,#800400);
 border: 2px solid #000;
 border-radius: 10px;
 position: relative;
 top: -40px;
 left: 45px;
 z-index: 4;
 }
 /*鈴鐺*/
 .doraemon .choker .bell {
 width: 40px;
 height: 40px;
 _overflow: hidden; /*IE6 hack*/
 border: 2px solid #000;
 border-radius: 50px;
 background: #f9f12a;
 background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
 background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
 background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
 box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
 position: absolute;
 top: 5px;
 left: 90px;
 }
 /*雙橫線*/
 .doraemon .choker .bell_line {
 width: 36px;
 height: 2px;
 background: #f9f12a;
 border: 2px solid #333;
 border-radius: 3px 3px 0 0;
 position: absolute;
 top: 10px;
 }
 /*黑點(diǎn)*/
 .doraemon .choker .bell_circle{
 width:12px;
 height:10px;
 background:#000;
 border-radius:5px;
 position:absolute;
 top:20px;
 left:14px;
 }
 /*黑點(diǎn)下的線*/
 .doraemon .choker .bell_under{
 width: 3px;
 height:15px;
 background:#000;
 position:absolute;
 left: 18px;
 top:27px;
 }
 /*鈴鐺高光*/
 .doraemon .choker .bell_light{
 width:12px;
 height:12px;
 border-radius:10px;
 box-shadow:19px 8px 5px #fff;
 position:absolute;
 top:-5px;
 left:5px;
 opacity:0.7;
 }
 /*身子*/
 .doraemon .bodys {
 position: relative;
 top: -310px;
 }
 /*肚子*/
 .doraemon .bodys .body {
 width: 220px;
 height: 165px;
 background: #07beea;
 background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
 background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
 background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
 border:2px solid #333;
 position:absolute;
 top:265px;
 left:50px;
 }
 /*白色肚兜*/
 .doraemon .bodys .wraps {
 width: 170px;
 height: 170px;
 background: #fff;
 background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
 background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
 background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
 border: 2px solid #000;
 border-radius: 85px;
 position: absolute;
 left: 72px;
 top: 230px;
 }
 /*口袋*/
 .doraemon .bodys .pocket {
 width: 130px;
 height: 130px;
 border-radius: 65px;
 background: #fff;
 background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
 background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
 background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
 border: 2px solid #000;
 position:absolute;
 top: 250px;
 left: 92px;
 }
 /*擋住口袋一半*/
 .doraemon .bodys .pocket_mask {
 width: 134px;
 height: 60px;
 background:#fff;
 border-bottom: 2px solid #000;
 position:absolute;
 top: 259px;
 left: 92px;
 }

好吧，脖子和身子都有啦！上圖：

現(xiàn)在看起來有點(diǎn)像擺設(shè)品，不過笑容還是那么單純，好了，趕緊把手腳做出來：

/*左右手*/
 .doraemon .hand_right, .doraemon .hand_left {
 height: 100px;
 width: 100px;
 position: absolute;
 top: 272px;
 left: 248px;
 }
 /*左手*/
 .doraemon .hand_left {
 left: -10px;
 }
 /*手臂公共部分*/
 .doraemon .arm {
 width:80px;
 height:50px;
 background: #07beea;
 background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
 background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
 background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
 border: 1px solid #000000;
 box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
 z-index: -1;
 position: relative;
 }
 /*右手手臂*/
 .doraemon .hand_right .arm {
 top: 17px;
 -webkit-transform: rotate(35deg);
 -moz-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
 transform: rotate(35deg);
 }
 /*左手手臂*/
 .doraemon .hand_left .arm {
 top: 17px;
 background: #0096be; /*背光一面使用純色，使其有立體感*/
 box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
 -webkit-transform: rotate(145deg);
 -moz-transform: rotate(145deg);
 -ms-transform: rotate(145deg);
 -o-transform: rotate(145deg);
 transform: rotate(145deg);
 }
 /*圓形手掌公共部分*/
 .doraemon .circle {
 width: 60px;
 height: 60px;
 border-radius: 30px;
 border: 2px solid #000;
 background: #fff;
 background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
 background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
 background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
 position: absolute;
 }
 /*右手手掌*/
 .doraemon .hand_right .circle {
 left: 40px;
 top: 32px;
 }
 /*左手手掌*/
 .doraemon .hand_left .circle {
 left: -20px;
 top: 32px;
 }
 /*手臂和身體結(jié)合處，使用背景遮住邊框*/
 .doraemon .arm_rewrite {
 height: 45px;
 width: 5px;
 background: #07beea;
 position: relative;
 }
 /*右手結(jié)合處*/
 .doraemon .hand_right .arm_rewrite {
 top: -45px;
 left: 22px;
 }
 /*左手結(jié)合處*/
 .doraemon .hand_left .arm_rewrite {
 top: -45px;
 left: 60px;
 background: #0096be; /*同理，背光一面使用純色，使其有立體感*/
 }
 /*腳部*/
 .doraemon .foot {
 width: 280px;
 height: 40px;
 position: relative;
 top: 55px;
 left: 20px;
 }
 /*左右腳共同樣式*/
 .doraemon .foot .left, .doraemon .foot .right {
 width: 125px;
 height: 30px;
 background: #fff;
 background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
 background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
 background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
 border: 2px solid #333;
 border-radius: 80px 60px 60px 40px;
 box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
 position: relative;
 }
 .doraemon .foot .left {
 left: 8px;
 top: 65px;
 }

 .doraemon .foot .right {
 top: 31px;
 left: 141px;
 }
 /*雙腳之間的縫隙，加陰影使用立體感*/
 .doraemon .foot .foot_rewrite {
 width: 20px;
 height: 10px;
 background: #fff;
 background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
 background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
 background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
 /*制作半圓效果*/
 border: 2px solid #000; 
 border-bottom: none;
 border-radius: 40px 40px 0 0;
 position: relative;
 top: -11px;
 left: 130px;
 _left: 127px;
 }

好了，最后完整結(jié)果：

看一下，效果是不是和一開始的一樣呢，雖然做好了，但是還是可以讓它動(dòng)起來的，比如眼睛，我們可以給它加個(gè)動(dòng)畫效果，讓眼睛轉(zhuǎn)動(dòng)起來：

/*眼珠*/
 .doraemon .eyes .eye .black {
 width: 14px;
 height: 14px;
 background: #000;
 border-radius: 7px;
 position: absolute;
 top: 40px;
 -webkit-animation: eyemove 3s linear infinite;
 -moz-animation: eyemove 3s linear infinite;
 -ms-animation: eyemove 3s linear infinite;
 -o-animation: eyemove 3s linear infinite;
 animation: eyemove 3s linear infinite;
 }

 /*讓眼睛動(dòng)起來*/
 @-webkit-keyframes eyemove {
 70%{
 margin:0 0 0 0;
 }
 80% {
 margin: -22px 0 0 0;
 }

 85% {
 margin: -22px 0 0 5px;
 }

 90% {
 margin: -22px 10px 0 0;
 }

 93% {
 margin: -22px 0 0 0;
 }

 96% {
 margin: 0 0 0 0;
 }
 }

 @-moz-keyframes eyemove {
 70% {
 margin: 0 0 0 0;
 }

 80% {
 margin: -22px 0 0 0;
 }

 85% {
 margin: -22px 0 0 5px;
 }

 90% {
 margin: -22px 10px 0 0;
 }

 93% {
 margin: -22px 0 0 0;
 }

 96% {
 margin: 0 0 0 0;
 }
 }

 @-o-keyframes eyemove {
 70% {
 margin: 0 0 0 0;
 }

 80% {
 margin: -22px 0 0 0;
 }

 85% {
 margin: -22px 0 0 5px;
 }

 90% {
 margin: -22px 10px 0 0;
 }

 93% {
 margin: -22px 0 0 0;
 }

 96% {
 margin: 0 0 0 0;
 }
 }
 @keyframes eyemove {
 70% {
 margin: 0 0 0 0;
 }

 80% {
 margin: -22px 0 0 0;
 }

 85% {
 margin: -22px 0 0 5px;
 }

 90% {
 margin: -22px 10px 0 0;
 }

 93% {
 margin: -22px 0 0 0;
 }

 96% {
 margin: 0 0 0 0;
 }
 }

OK，這樣，眼睛就會(huì)動(dòng)了，有興趣的可以試一下，這里就無法展示了。但是如果你有什么更好的動(dòng)畫效果也可以嘗試，那么這個(gè)案例就結(jié)束了。

【相關(guān)推薦】

1. 特別推薦：“php程序員工具箱”V0.1版本下載

2. 免費(fèi)html在線視頻教程

3. php.cn原創(chuàng)html5視頻教程

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com