Tuzki の単純な内気な表現を Pure CSS3 で実現_html/css_WEB-ITnose

この非常に単純な小さな表現を見てください:

Tuzki の内気な表情

ここでコードを共有します:

html 構造:

<div class="tuzki_container">    <div class="tuzki">        <div class="leftear"></div>        <div class="rightear"></div>        <div class="header">            <div class="lefteye"></div>            <div class="righteye"></div>            <div class="leftcheek"></div>            <div class="rightcheek"></div>        </div>        <div class="body"></div>        <div class="hearts">            <div class="heart"></div>        </div>    </div></div>

この構造はまだ非常に単純です。結局のところ、Tuzki は単純な線描画表現です。主なことは、それを人工的にアニメーション化し、特定の状況を表現することです。

CSS スタイルを設定しましょう:

頭 (目と頬を含む):

.tuzki_container{    position:relative;}.tuzki{    width:220px;    height:300px;    margin:50px auto;    position: relative;    overflow:hidden;}.header{    width:194px;    height:170px;    background:#fff;    border:8px solid #000;    border-radius:194px/170px;    -webkit-transform:rotate(2deg);    -moz-transform:rotate(2deg);    -o-transform:rotate(2deg);    -ms-transform:rotate(2deg);    transform:rotate(2deg);    position: absolute;    top:45px;    left:0;    overflow:hidden;    z-index:2;}.header:before{    content:'';    display:block;    width:200px;    height:140px;    border-bottom:40px solid rgba(198,207,212,0.7);    border-radius:150px;    margin-top:-5px;    z-index:5;    position:absolute;}.header .lefteye,.header .righteye{    width:58px;    height:8px;    background:#000;    border-radius:5px;    -webkit-transform:rotate(5deg);    -moz-transform:rotate(5deg);    -o-transform:rotate(5deg);    -ms-transform:rotate(5deg);    transform:rotate(5deg);    position: absolute;    top:70px;    left:10px;}.header .righteye{    top:78px;    left:100px;}.leftcheek{    width:26px;    height:26px;    background:#ff6666;    border-radius:50%;    box-shadow:0 0 5px #ff6666;    position: absolute;    top:95px;    left:3px;    opacity:0.9;    -webkit-animation:cheekscale 1s ease-out infinite;    -moz-animation:cheekscale 1s ease-out infinite;    -o-animation:cheekscale 1s ease-out infinite;    -ms-animation:cheekscale 1s ease-out infinite;    animation:cheekscale 1s ease-out infinite;}.rightcheek{    width:30px;    height:30px;    background:#ff6666;    border-radius:50%;    box-shadow:0 0 5px #ff6666;    position: absolute;    top:105px;    left:140px;    opacity:0.9;    -webkit-animation:cheekscale 1s ease-out infinite;    -moz-animation:cheekscale 1s ease-out infinite;    -o-animation:cheekscale 1s ease-out infinite;    -ms-animation:cheekscale 1s ease-out infinite;    animation:cheekscale 1s ease-out infinite;}@-webkit-keyframes cheekscale {    0%{        -webkit-transform:scale(1);        opacity:0;    }    100%{        -webkit-transform:scale(1.1);        box-shadow:0 0 10px #ff6666;        opacity:0.6;    }}@-moz-keyframes cheekscale {    0%{        -moz-transform:scale(1);        opacity:0;    }    100%{        -moz-transform:scale(1.1);        box-shadow:0 0 10px #ff6666;        opacity:0.6;    }}@-o-keyframes cheekscale {    0%{        -o-transform:scale(1);        opacity:0;    }    100%{        -o-transform:scale(1.1);        box-shadow:0 0 10px #ff6666;        opacity:0.6;    }}@-ms-keyframes cheekscale {    0%{        -ms-transform:scale(1);        opacity:0;    }    100%{        -ms-transform:scale(1.1);        box-shadow:0 0 10px #ff6666;        opacity:0.6;    }}@keyframes cheekscale {    0%{        transform:scale(1);        opacity:0;    }    100%{        transform:scale(1.1);        box-shadow:0 0 10px #ff6666;        opacity:0.6;    }}

耳:

.leftear{    width:22px;    height:50px;    border:7px solid #000;    border-radius:34px/62px;    position:absolute;    top:2px;    left:75px;    -webkit-transform:rotate(6deg);    -moz-transform:rotate(6deg);    -o-transform:rotate(6deg);    -ms-transform:rotate(6deg);    transform:rotate(6deg);}.rightear{    width:22px;    height:80px;    background:#fff;    border:7px solid #000;    border-top-left-radius:34px 62px;    border-top-right-radius:34px 62px;    border-bottom-left-radius:34px 100px;    border-bottom-right-radius:34px 100px;    -webkit-transform:rotate(20deg);    -moz-transform:rotate(20deg);    -o-transform:rotate(20deg);    -ms-transform:rotate(20deg);    transform:rotate(20deg);    position:absolute;    left:140px;    top:3px;    z-index:3;}.rightear:after{    content:'';    display:block;    width:30px;    height:15px;    background:#fff;    position: absolute;    bottom:-7px;    left:-5px;}

体:

.body{    width:100px;    height:100px;    background:#fff;    border:8px solid #000;    border-left:6px solid #000;    border-top-left-radius:54px 130px;    border-top-right-radius:54px 130px;    border-bottom-left-radius:20px 100px;    border-bottom-right-radius:20px 100px;    -webkit-transform:rotate(-3deg);    -moz-transform:rotate(-3deg);    -o-transform:rotate(-3deg);    -ms-transform:rotate(-3deg);    transform:rotate(-3deg);    position: absolute;    top:215px;    left:65px;}.body:before{    content:'';    display:block;    width:40px;    height:100px;    border:7px solid #000;    border-right:none;    border-top:none;    border-top-left-radius:30px 50px;    border-top-right-radius:30px 50px;    border-bottom-left-radius:24px 80px;    -webkit-transform:rotate(19deg);    -moz-transform:rotate(19deg);    -o-transform:rotate(19deg);    -ms-transform:rotate(19deg);    transform:rotate(19deg);    position: absolute;    left:-19px;    top:-2px;}.body:after{    content:'';    display:block;    width:20px;    height:60px;    border-right:6px solid #000;    border-radius:50px;    position: absolute;    left:57px;    top:30px;}

ハートの形:

.heart,.heart:before{    display: inline-block;    width: 20px;    height: 30px;    border-radius: 10px;    background: #ff6666;    position: absolute;    top:-10px;    left:12.7px;    -webkit-transform-origin: bottom right;    -moz-transform-origin: bottom right;    -o-transform-origin: bottom right;    -ms-transform-origin: bottom right;    transform-origin: bottom right;    -webkit-transform: rotate(-45deg);    -moz-transform: rotate(-45deg);    -o-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    transform: rotate(-45deg);}.heart:before{    content: '';    -webkit-transform-origin: bottom left;    -moz-transform-origin: bottom left;    -o-transform-origin: bottom left;    -ms-transform-origin: bottom left;    transform-origin: bottom left;    -webkit-transform: rotate(90deg);    -moz-transform: rotate(90deg);    -o-transform: rotate(90deg);    -ms-transform: rotate(90deg);    transform: rotate(90deg);    top:-18px;    left:2px;}.heart:after{    content: '';    width: 0;    height: 0;    border-left:10.8px solid transparent;    border-right:10.8px solid transparent;    border-top:12px solid #ff6666;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -o-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);    position: absolute;    top:22.6px;    left:-7.3px;}.hearts{    opacity:0;    -webkit-transform:rotate(-30deg) translate3d(-10px,-15px,0);    -moz-transform:rotate(-30deg) translate3d(-10px,-15px,0);    -o-transform:rotate(-30deg) translate3d(-10px,-15px,0);    -ms-transform:rotate(-30deg) translate3d(-10px,-15px,0);    transform:rotate(-30deg) translate3d(-10px,-15px,0);    -webkit-animation:heartmove 1s ease-in infinite;    -moz-animation:heartmove 1s ease-in infinite;    -o-animation:heartmove 1s ease-in infinite;    -ms-animation:heartmove 1s ease-in infinite;    animation:heartmove 1s ease-in infinite;}@-webkit-keyframes heartmove {    0%{        opacity:0;        -webkit-transform:rotate(-30deg) translate3d(-10px,-15px,0);    }    100%{        opacity:0.6;        -webkit-transform:rotate(-30deg) translate3d(-10px,-25px,0);    }}@-moz-keyframes heartmove {    0%{        opacity:0;        -moz-transform:rotate(-30deg) translate3d(-10px,-15px,0);    }    100%{        opacity:0.6;        -moz-transform:rotate(-30deg) translate3d(-10px,-25px,0);    }}@-o-keyframes heartmove {    0%{        opacity:0;        -o-transform:rotate(-30deg) translate3d(-10px,-15px,0);    }    100%{        opacity:0.6;        -o-transform:rotate(-30deg) translate3d(-10px,-25px,0);    }}@-ms-keyframes heartmove {    0%{        opacity:0;        -ms-transform:rotate(-30deg) translate3d(-10px,-15px,0);    }    100%{        opacity:0.6;        -ms-transform:rotate(-30deg) translate3d(-10px,-25px,0);    }}@keyframes heartmove {    0%{        opacity:0;        transform:rotate(-30deg) translate3d(-10px,-15px,0);    }    100%{        opacity:0.6;        transform:rotate(-30deg) translate3d(-10px,-25px,0);    }}

追記: Tuzki の表情の多くは同じ体をベースにしており、別のアニメーションで表現されているため、涙の表情を作りたい場合は、アニメーション部分を涙に変更するだけで、他の部分は変更する必要はありません。それはとても簡単です！