어떻게 CSS 3 를 사용 하여 도 라 에 몽 고양 이 를 그 릴 수 있 습 니까?

21334 단어 CSS3
방금 이 사례 를 배 운 후에 비교적 재 미 있 는 것 같 아서 연습 을 했다.그리고 어렵 지 않다 는 것 을 알 게 되 었 습 니 다.PS 나 Flash 를 자주 사용 하면 도 라 에 몽 고양 이 를 그 리 는 것 이 쉬 운 일이 라 고 생각 할 것 입 니 다.적어도 저 는 그렇게 생각 합 니 다.그러나 CSS 3 로 그 리 는 것 은 처음 접 하 는 것 이기 때문에 기꺼이 시도 해 보 겠 습 니 다.저 같은 풋내기 에 게 많은 도움 이 되 었 습 니 다.적어도 간단 한 인물 이미 지 를 그 리 는 방법 을 알 고 애니메이션 효 과 를 더 하면 살 수 있 습 니 다.그러면 더욱 재 미 있 습 니 다!OK,시작 하기 전에 먼저 효과 도 를 말 려 주세요.

PS:솔직히 저 는 귀 엽 더 라 고요.어 렸 을 때 많이 봤 어 요.A 몽.갑자기 친근감 이 생 겼 어 요.너무 어 려 서 순간 에 많이 젊 어 졌어 요.하하!열렬 히 웃 는 얼굴
먼저 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>
 먼저 도 라 에 몽 고양이 의 전체적인 구 조 를 자세히 연구 하 는 것 이 좋 습 니 다.이것 은 앞으로 다른 인물 의 이미 지 를 직접 그 리 는 데 도움 이 되 고 생각 이 밝 을 것 입 니 다.
이어서 우 리 는 머리,목,몸,발 에 따라 각각 시범 을 보 였 다.먼저 용기 wrapper 와 도 라 에 몽 고양 이 를 전체적으로 기본 적 인 스타일 로 만 들 고 도 라 에 몽 의 전체적인 도 라 에 몽 은 position 를 relative 로 설정 하 며 주로 하위 요소/후대 요 소 를 쉽게 포 지 셔 닝 하기 위해 서 입 니 다.

.wrapper{ 
 margin: 50px 0 0 500px; 
} 
.doraemon{ 
 position: relative; 
}
머리 head 의 스타일 은 도 라 에 몽 고양이 의 머리 가 정원 이 아니 기 때문에 너비 와 높이 가 약간 차이 가 있 습 니 다.그리고 border-radius 를 사용 하여 머리 를 직사각형 에서 타원형 으로 바 꾼 다음 에 도로 방향 을 그 라 데 이 션 하여 오른쪽 상단 에서 배경 에 방사성 그 라 데 이 션 을 한 다음 에 음영 을 주어 입체 감 을 줍 니 다.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); 
}
효과 가 어떤 지:

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: Cms-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; 
 } 
 }
OK,그러면 눈 이 움 직 여요.관심 있 는 거 해 보 세 요.여 기 는 보 여줄 수 없어 요.하지만 더 좋 은 애니메이션 효과 가 있 으 면 시도 해 보 세 요.그러면 이 사례 는 끝 납 니 다.
PS:이것 은 하나의 사례 이지 만 제 가 생각 을 넓 히 는 데 도움 을 주 었 습 니 다.그리고 사실은 이런 효 과 를 만 드 는 데 많은 시간 이 걸 릴 수 있 습 니 다.적어도 저 에 게 지금 은 이런 모습 입 니 다.주요 한 난점 은 구조 포 지 셔 닝 과 색채 의 합 리 적 인 조합 이 어야 이미지 가 더욱 생동감 있 게 만 들 수 있 습 니 다!PS 나 Flash 등 그래 픽 처리 소프트웨어 에 익숙 하지 않 고 CSS 3 로 인물 을 그 리 는 것 이나 다른 효과 에 대해 두서 가 없 는 사람 도 있 을 수 있 습 니 다.그러면 일부 사이트 에 가서 디자이너 들 의 디자인 구도,도형 분해 등 관련 디자인 지식 을 참고 하여 우리 가 더욱 잘 이해 하도록 도와 줄 수 있 습 니 다.
이상 은 본문의 전체 내용 이 니 여러분 들 이 좋아 하 시고 실천 하 시기 바 랍 니 다.
ORACLE EXP 에서 빈 테이블 을 내 보 낼 수 없 는 원인 분석 및 해결 방법
Oracle 표 파편 정리 작업 절차 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage