Cara melukis kucing jingle menggunakan CSS3_CSS/HTML

Saya baru belajar kes ini dan fikir ia lebih menyeronokkan, jadi saya mengamalkannya. Kemudian saya mendapati bahawa ia sebenarnya tidak sukar Jika anda sering menggunakan PS atau Flash, anda harus tahu bahawa ia adalah sangat mudah untuk melukis kucing jingle, sekurang-kurangnya saya fikir begitu. Walau bagaimanapun, ini adalah kali pertama saya melukis dengan CSS3, jadi saya gembira untuk mencubanya Untuk orang baru seperti saya, ia sangat membantu Sekurang-kurangnya saya tahu cara melukis watak yang mudah, ditambah dengan beberapa kesan animasi hidup, itu lebih menyeronokkan! OK, sebelum kita mula, izinkan saya menunjukkan kepada anda rendering:

PS: Sejujurnya, saya rasa ia agak comel ketika saya masih kecil, dan tiba-tiba saya berasa sangat mesra dan seperti kanak-kanak serta-merta, haha! Senyuman hangat

Mula-mula, sediakan struktur 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>

Adalah lebih baik untuk mengkaji struktur keseluruhan Jingle Cat dengan teliti terlebih dahulu. Ini akan sangat membantu jika anda ingin melukis watak lain sendiri pada masa hadapan, dan idea akan menjadi lebih jelas.

Seterusnya, kami akan membuat demonstrasi berdasarkan kepala, leher, badan, dan kaki. Pertama, buat beberapa gaya asas untuk pembungkus bekas dan Doraemon secara keseluruhannya Doraemon menetapkan kedudukan kepada relatif, terutamanya untuk memudahkan kedudukan elemen kanak-kanak / elemen keturunan.

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

Gaya kepala, kerana kepala Jingle Cat bukan bulatan yang sempurna, jadi lebar dan tinggi sedikit menyimpang, kemudian gunakan jejari sempadan untuk menukar kepala dari segi empat tepat kepada bujur, dan kemudian gunakan kecerunan jejari dari sudut kanan atas Berikan latar belakang kecerunan jejari, dan kemudian tambahkan bayang untuk menjadikannya lebih tiga dimensi Latar belakang: #07bbee adalah untuk keserasian dengan pelayar versi bawah:

.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);
}

Tengok kesannya:

Shenmgui yang terkejut sangat hodoh, jangan risau, biarkan ia hidup perlahan-lahan:

/*脸部*/
 .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;
 }

Selepas menulis begitu banyak gaya, apakah hasilnya:

Sakit terasa janggal tidak kira bagaimana anda melihatnya, oh! Kita masih memerlukan janggut dan sempadan putih di bahagian bawah muka, mari tambahkannya:

/*胡须背景，主要用于挡住嘴巴的一部分，不要显得太长*/
 .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);
 }

Senyum Betul, ia kelihatan sangat selesa! Pukul semasa seterika panas dan lakukan leher dan badan:

/*围脖*/
 .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;
 }

Okay, leher dan badan kedua-duanya ada! Di atas:

Ia kelihatan seperti hiasan sekarang, tetapi senyuman itu masih begitu polos Okay, mari buat tangan dan kaki dengan cepat:

/

*左右手*/
 .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;
 }

Baiklah, keputusan lengkap akhir:

Mari kita lihat jika kesannya sama seperti yang pertama, walaupun sudah selesai, anda masih boleh membuatnya bergerak, seperti mata Kita boleh menambah kesan animasi padanya untuk membuat mata bergerak:

/*眼珠*/
 .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, dengan cara ini, mata akan bergerak Jika anda berminat, anda boleh mencubanya. Tetapi jika anda mempunyai sebarang kesan animasi yang lebih baik yang anda boleh cuba, maka kes ini telah berakhir.

PS: Walaupun ini hanya kes, ia benar-benar membantu saya meluaskan pemikiran saya, sebenarnya, ia mungkin mengambil banyak masa untuk mencipta kesan seperti itu kesukaran utama ialah kedudukan susun atur dan warna Gabungan yang munasabah boleh menjadikan imej lebih realistik dan jelas! Mungkin juga ada orang yang tidak begitu biasa dengan perisian pemprosesan grafik seperti PS atau Flash, dan tidak tahu tentang menggunakan CSS3 untuk melukis beberapa aksara atau kesan lain Kemudian mereka boleh pergi ke beberapa tapak web untuk merujuk kepada komposisi reka bentuk pereka. penguraian grafik dan pengetahuan reka bentuk lain yang berkaitan Bantu kami memahami dengan lebih baik.

Di atas adalah keseluruhan kandungan artikel ini saya harap anda dapat menyukainya dan mengamalkannya.