ジングルを描画するための純粋な CSS3 cat_html/css_WEB-ITnose

この事例を勉強して、もっと楽しいと思ったので、実践してみました。その後、PS や Flash をよく使用する人であれば、ジングル キャットを描くのは非常に簡単であることを知っているはずです。少なくとも私はそう思います。しかし、実際に CSS3 で描画するのは初めてなので、私のような初心者にとっては、少なくとも簡単なキャラクターの描画方法といくつかのアニメーション効果を知ることができてとても役に立ちます。生きてたらもっと楽しいよ！ OK、始める前に、レンダリングをお見せしましょう:

最終レンダリング

追記: 正直に言うと、私は以前、ドラえもんを見ていたのですが、これはかなりかわいいと思います。私が子供の頃、メンは突然とてもフレンドリーで子供っぽくなり、すぐにずっと若く見えました（笑）。

まず、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>

Jingle Cat の全体的な構造を注意深く研究することが最善です。これは、他のキャラクターを描画する場合に非常に役立ちます。それが将来自分自身で役立つならば、思考はより明確になるでしょう。

次に、頭、首、体、足をベースにデモンストレーションしていきます。まず、コンテナのラッパーとドラえもん全体の基本的なスタイルをいくつか作成します。 ドラえもんは、主に子要素/子孫要素の配置を容易にするために、位置を相対に設定します。

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

頭のスタイル。Jingle Cat の頭は完全な円ではないため、幅と高さが少しずれています。次に、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);}

何ということでしょう、とても醜いです、心配しないで、ゆっくり生き返らせてください:

が書きました スタイルが多すぎると、結果はどうなりますか:

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

効果が最初と同じかどうかを確認してみましょう。目などが動く場合は、アニメーション効果を追加して目を動かすことができます:

OK、このようにして目が動きます。ここで試すことができます。 表示できません。ただし、もっと良いアニメーション効果がある場合は、試してみましょう。このケースは終わりです。

/*眼珠*/        .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;            }        }