CSS3_CSS/HTML을 사용하여 징글캣을 그리는 방법

방금 이 사건을 공부하다가 더 재미있을 것 같아서 연습을 해봤습니다. 그러다가 실제로 어렵지 않다는 걸 깨달았습니다. PS나 Flash를 자주 사용한다면 징글캣을 그리는 것이 매우 쉽다는 사실은 적어도 제 생각에는 그렇게 생각합니다. 하지만 CSS3를 사용하여 그리는 것은 처음이므로 저와 같은 초보자에게는 정말 도움이 됩니다. 적어도 간단한 캐릭터를 그리는 방법과 몇 가지 애니메이션 효과는 알고 있습니다. 살아있다면 그게 더 재미있을 것 같아요! 좋습니다. 시작하기 전에 렌더링을 보여드리겠습니다.

PS: 솔직히 말해서 꽤 귀여운 것 같아요. 어릴 때 도라에몽을 자주 보더니 갑자기 너무 친근하고 어린애 같아 보이더라고요. 하하! 따뜻한 미소

먼저 HTML 구조를 설정합니다.

<div class="wrapper"> 
 <!--叮当猫整体--> 
 <div class="doraemon"> 
 <!--头部--> 
 <div class="head"> 
 <!--眼睛--> 
 <div class="eyes"> 
 <div class="eye left"> 
  <!--眼珠--> 
  <div class="black bleft"></div> 
 </div> 
 <div class="eye right"> 
  <div class="black bright"></div> 
 </div> 
 </div> 
 <!--脸部--> 
 <div class="face"> 
 <!--白色脸底--> 
 <div class="white"></div> 
 <!--鼻子--> 
 <div class="nose"> 
  <!--鼻子高光部分--> 
  <div class="light"></div> 
 </div> 
 <!--鼻子的竖线--> 
 <div class="nose_line"></div> 
 <!--嘴巴--> 
 <div class="mouth"></div> 
 <!--胡须--> 
 <div class="whiskers"> 
  <div class="whisker rTop r160"></div> 
  <div class="whisker rMiddle"></div> 
  <div class="whisker rBottom r20"></div> 
  <div class="whisker lTop r20"></div> 
  <div class="whisker lMiddle"></div> 
  <div class="whisker lBottom r160"></div> 
 </div> 
 </div> 
 </div> 
 <!--脖子和铃铛--> 
 <div class="choker"> 
 <!--铃铛--> 
 <div class="bell"> 
 <div class="bell_line"></div> 
 <div class="bell_circle"></div> 
 <div class="bell_under"></div> 
 <div class="bell_light"></div> 
 </div> 
 </div> 
 <!--身体--> 
 <div class="bodys"> 
 <!--肚子--> 
 <div class="body"></div> 
 <!--肚兜--> 
 <div class="wraps"></div> 
 <!--口袋--> 
 <div class="pocket"></div> 
 <!--遮住一半口袋，使其呈现半圆--> 
 <div class="pocket_mask"></div> 
 </div> 
 <!--右手--> 
 <div class="hand_right"> 
 <!--手臂--> 
 <div class="arm"></div> 
 <!--手掌--> 
 <div class="circle"></div> 
 <!--遮住手臂和身子交接处的线--> 
 <div class="arm_rewrite"></div> 
 </div> 
 <!--左手--> 
 <div class="hand_left"> 
 <div class="arm"></div> 
 <div class="circle"></div> 
 <div class="arm_rewrite"></div> 
 </div> 
 <!--脚--> 
 <div class="foot"> 
 <div class="left"></div> 
 <div class="right"></div> 
 <!--双脚之间的缝隙--> 
 <div class="foot_rewrite"></div> 
 </div> 
 </div> 
</div>

먼저 징글캣의 전체적인 구조를 주의 깊게 연구해 보시는 것이 가장 좋습니다. 나중에 다른 캐릭터를 직접 그려보고 싶다면, 아이디어가 더욱 명확해질 것입니다.

다음은 머리, 목, 몸통, 발을 기준으로 시연해보겠습니다. 먼저 컨테이너 래퍼와 Doraemon 전체에 대한 몇 가지 기본 스타일을 만듭니다. Doraemon은 주로 하위 요소/하위 요소의 위치 지정을 용이하게 하기 위해 위치를 상대적으로 설정합니다.

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

머리 스타일, 징글캣의 머리가 완전한 원형이 아니기 때문에 폭과 높이가 조금 어긋나 있는데, border-radius를 이용하여 머리를 직사각형에서 타원형으로 변경한 후 사용하세요. 오른쪽 상단의 방사형 그라데이션 배경에 방사형 그라데이션을 적용한 다음 그림자를 추가하여 더욱 입체적으로 만듭니다. 배경: #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); 
} 

효과 살펴보기:

놀란 shenmgui가 너무 못생겼으니 걱정하지 마세요. 천천히 살아나도록 하세요.

/*脸部*/ 
 .doraemon .face { 
 position: relative; /*让所有脸部元素可自由定位*/ 
 z-index: 2; /*脸在头部背景上面*/ 
 } 
 /*白色脸底*/ 
 .doraemon .face .white { 
 width: 265px; /*设置宽高*/ 
 height: 195px; 
 border-radius: 150px; 
 position: absolute; /*进行绝对定位*/ 
 top: 75px; 
 left: 25px; 
 background: #fff; 
 /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/ 
 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; /*通过阴影实现高光*/ 
 } 
 /*鼻子下的线*/ 
 .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; 
 } 

많은 스타일을 쓴 후의 결과는 무엇입니까:

아픈 건 아무리 봐도 어색해요, 오! 턱수염과 얼굴 아래쪽의 흰색 테두리가 여전히 필요합니다. 추가해 보겠습니다.

/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/ 
 .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; 
 } 
 /*胡子旋转角度*/ 
 .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; 
 } 
 /*黑点*/ 
 .doraemon .choker .bell_circle{ 
 width:12px; 
 height:10px; 
 background:#000; 
 border-radius:5px; 
 position:absolute; 
 top:20px; 
 left:14px; 
 } 
 /*黑点下的线*/ 
 .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; 
 }

네 목이랑 몸통 둘 다 있어요! 위:

지금은 좀 장식같아 보이지만 미소는 여전히 청순하네요. 자, 손과 발을 빠르게 만들어 보겠습니다.

/

*左右手*/ 
 .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; 
 } 
 /*手臂和身体结合处，使用背景遮住边框*/ 
 .doraemon .arm_rewrite { 
 height: 45px; 
 width: 5px; 
 background: #07beea; 
 position: relative; 
 } 
 /*右手结合处*/ 
 .doraemon .hand_right .arm_rewrite { 
 top: -45px; 
 left: 22px; 
 } 
 /*左手结合处*/ 
 .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; 
 } 

자, 최종 완성 결과:

효과가 첫 번째와 동일한지 살펴보겠습니다. 웃음은 끝났지만 눈과 같은 애니메이션 효과를 추가하여 눈을 움직일 수 있습니다.

/*眼珠*/ 
 .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; 
 } 
 
 /*让眼睛动起来*/ 
 @-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; 
 } 
 } 

좋아요, 이렇게 하면 눈이 움직일 것입니다. 관심이 있으시면 여기에 표시할 수 없습니다. 하지만 시도해 볼 수 있는 더 나은 애니메이션 효과가 있다면 이 경우는 끝입니다.

PS: 비록 이것이 제 생각의 폭을 넓히는 데 큰 도움이 되었습니다. 사실, 그런 효과를 내는 데는 많은 시간이 걸릴 수 있습니다. 적어도 지금은 그렇습니다. 가장 큰 어려움은 레이아웃 위치와 색상입니다. 합리적인 조합으로 이미지를 더욱 현실적이고 생생하게 만들 수 있습니다. PS나 Flash와 같은 그래픽 처리 소프트웨어에 익숙하지 않고 CSS3를 사용하여 캐릭터나 기타 효과를 그리는 방법에 대해 전혀 모르는 사람들도 있을 수 있습니다. 그런 다음 일부 웹사이트에 가서 디자이너의 디자인 구성을 참조할 수 있습니다. 그래픽 분해 및 기타 관련 디자인 지식을 더 잘 이해할 수 있도록 도와주세요.

위 내용은 이 글의 전체 내용입니다. 마음에 드시고 실천해 보시길 바랍니다.