CSS Doraemon dễ thương bằng animations

Cập nhật: Lượt xem: 76 [ Css ]

Tạo hình Doraemon bằng css

CSS Doraemon dễ thương bằng animations

HTML

Đầu tiên các bạn thêm đoạn HTML này vào:

<h1>Doraemon</h1>
<div class="main">
    <div class="cajaovalo">
        <div class="ovalo"></div>
        <div class="semi-circulo">
            <div class="palo"></div>
        </div>
    </div>

    <div class="cabeza">

        <ul class="bigotes">
            <li>
                <div class="b1"></div>
            </li>
            <li>
                <div class="b2"></div>
            </li>
            <li>
                <div class="b3"></div>
            </li>
        </ul>

        <ul class="bigotes2">
            <li>
                <div class="b1_"></div>
            </li>
            <li>
                <div class="b2_"></div>
            </li>
            <li>
                <div class="b3_"></div>
            </li>
        </ul>




        <div class="circulo-dos">
            <ul class="_navegacion">
                <li>
                    <div class="pupila">
                        <div class="iris1"></div>
                    </div>
                </li>
                <li>
                    <div class="elemento"></div>
                    <div class="pupila2">
                        <div class="iris2"></div>
                    </div>
                </li>
            </ul>
            <div class="nariz">

                <div class="lunar"></div>
            </div>
            <div class="palonariz"></div>
            <div class="boca">
                <ul class="corazon"></ul>
            </div>
        </div>
    </div>



    <div class="huevo">
        <div class="bufanda"></div>
        <div class="campana">
            <div class="bolanegra"></div>
            <div class="palonegro"></div>
        </div>
        <div class="ovalocesta">
            <div class="cesta"></div>
        </div>
        <ul class="_brazos">
            <li>
                <div class="brazo1">
                    <div class="mano1"></div>
                </div>
            </li>
            <li>
                <div class="brazo2">
                    <div class="mano1"></div>
                </div>
            </li>
        </ul>
    </div>

    <ul class="_pie">
        <li>
            <div class="pie1"></div>
        </li>
        <li>
            <div class="pie2"></div>
        </li>
    </ul>

</div>

CSS

Sau đó các bạn style cho các class để ghép sao cho doreamon cực dễ thương mà chuyển động được:

/* CSS */
*{
    margin: 0;
    padding: 0;
    box - sizing: border - box;
    list - style: none;
    text - decoration: none;
}

body {
    background: #D4ECF9
}

.main {
    width: 600 px;
    height: auto;
    /*background-color: red;*/
    position: relative;
    margin: 5 % auto; -
    webkit - animation: volar 1 s linear 2 s infinite alternate; /* Safari 4.0 - 8.0 */
    animation: volar 1 s linear 2 s infinite alternate;
}

h1 {
    text - align: center;
}

.cajaovalo {
    width: 100 px;
    height: 5 px;
    background: transparent;
    margin: 0 auto;
    position: relative;
    margin - bottom: 10 px
}

/*corrocoptero*/
.ovalo {
    width: 100 px;
    /*height: 30px;*/
    height: 5 px;
    margin: 0 auto;
    /*background: white;*/
    background - color: gray; -
    ms - border - radius: 5 px; -
    o - border - radius: 5 px; -
    moz - border - radius: 5 px; -
    webkit - border - radius: 5 px;
    border - radius: 5 px;

    /*-moz-border-radius: 100px / 30px;
    -webkit-border-radius: 100px / 30px;
    border-radius: 100px / 30px;*/
    /*border: 2px solid black;*/
    border: 2 px solid gray;
    z - index: 100;
    opacity: 0.6;
    position: absolute;
    top: 5 px;


    -
    webkit - animation - name: rotar; -
    webkit - animation - duration: .1 s; -
    webkit - animation - iteration - count: infinite; -
    webkit - animation - timing - function: linear;

    -
    moz - animation - name: rotar; -
    moz - animation - duration: .1 s; -
    moz - animation - iteration - count: infinite; -
    moz - animation - timing - function: linear;

    -
    ms - animation - name: rotar; -
    ms - animation - duration: .1 s; -
    ms - animation - iteration - count: infinite; -
    ms - animation - timing - function: linear;

    -
    o - animation - name: rotar; -
    o - animation - duration: .1 s; -
    o - animation - iteration - count: infinite; -
    o - animation - timing - function: linear;

    animation - name: rotar;
    animation - duration: .1 s;
    animation - iteration - count: infinite;
    animation - timing - function: linear;
}

@ - webkit - keyframes rotar {
    from {
        -webkit - transform: rotate3D(0, 1, 0, 0 deg);
    }
    to {
        -webkit - transform: rotate3D(0, 1, 0, 360 deg);
    }
}

@ - moz - keyframes rotar {
    from {
        -moz - transform: rotate3D(0, 1, 0, 0 deg);
    }
    to {
        -moz - transform: rotate3D(0, 1, 0, 360 deg);
    }
}

@ - ms - keyframes rotar {
    from {
        -ms - transform: rotate3D(0, 1, 0, 0 deg);
    }
    to {
        -ms - transform: rotate3D(0, 1, 0, 360 deg);
    }
}

@ - o - keyframes rotar {
    from {
        -o - transform: rotate3D(0, 1, 0, 0 deg);
    }
    to {
        -o - transform: rotate3D(0, 1, 0, 360 deg);
    }
}

@keyframes rotar {
    from {
        transform: rotate3D(0, 1, 0, 0 deg);
    }
    to {
        transform: rotate3D(0, 1, 0, 360 deg);
    }
}

.semi - circulo {
        width: 20 px;
        height: 10 px;
        display: block;
        border: 2 px solid #555; 
     background: # BD8D22; -
        moz - border - radius: 100 px 100 px 0 0; -
        webkit - border - radius: 100 px 100 px 0 0;
        border - radius: 100 px 100 px 0 0;

        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        z - index: 2;
    }

    .palo {
        width: 7 px;
        height: 30 px;
        z - index: 1;
        background: #FCC136;
        position: relative;
        top: 7 px;
        border: 2 px solid black;
        margin: 0 auto;
    }

    .cabeza {
        width: 200 px;
        height: 200 px;
        border - radius: 50 % ;
        border: 2 px solid black;
        margin: 0 auto;
        position: relative;
        background: #35A1C9;
  z-index: 100;
  overflow: hidden;
}

.circulo-dos {
	width: 170px;
	height: 170px;
	border-radius: 100%;
	background: white;
	border: 2px solid black;
  position: absolute; 
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto
}

.boca {
     width: 140px; 
     height: 70px; 
     -moz-border-radius: 140px 140px 0 0;
     -webkit-border-radius: 140px 140px 0 0;
     border-radius: 140px 140px 0 0;
     background: # B11635;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -13 px; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(180 deg);
        /*top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
    }

    .pupila {
        width: 23 px;
        height: 15 px;
        background: black;
        border - radius: 100 % ; -
        moz - transform: rotate(90 deg); -
        webkit - transform: rotate(90 deg);
        position: absolute;
        top: 20 px;
        left: 58 px;
    }

    .pupila2 {
        width: 23 px;
        height: 15 px;
        background: black;
        border - radius: 100 % ; -
        moz - transform: rotate(90 deg); -
        webkit - transform: rotate(90 deg);
        position: absolute;
        top: 20 px;
        right: 58 px;
    }

    ._navegacion {
        margin: 0 auto;
    }

    ._navegacion li {
        margin: 0 0;
        background: white;
        width: 48 px;
        height: 48 px;
        border - radius: 100 % ;
        border: 1 px solid black;
        overflow: hidden;

    }

    .elemento {
        width: 48 px;
        height: 48 px;
        background - color: white;
        position: relative;
        overflow: hidden;
        /*animation: pulse .9s infinite;
        -webkit-animation: pulse .9s infinite;
        -moz-animation: pulse .9s infinite;
        -ms-animation: pulse .9s infinite;
        -o-animation: pulse .9s infinite;*/
        -
        webkit - animation - duration: 1 s; -
        moz - animation - duration: 1 s; -
        ms - animation - duration: 1 s; -
        o - animation - duration: 1 s;
        /* Safari 4.0 - 8.0 */
        -
        webkit - animation - iteration - count: 3; -
        moz - animation - iteration - count: 3; -
        ms - animation - iteration - count: 3; -
        o - animation - iteration - count: 3;
        /* Safari 4.0 - 8.0 */
        -
        webkit - animation - name: pulse; -
        moz - animation - name: pulse; -
        ms - animation - name: pulse; -
        o - animation - name: pulse;
        animation - name: pulse;
        animation - duration: 1 s;
        animation - iteration - count: 3;
        z - index: 100;
    }

    .elemento: after {
        content: "⌒";
        width: 48 px;
        line - height: 2.5;
        font - size: 30 px;
        color: #000;
  position: absolute;

  text-align: center;
  font-weight: bold;
}

@-webkit-keyframes pulse {
  to {
    bottom: 100px;
  }
  from {
    bottom: 0;
  }
}

@-ms-keyframes pulse {
  to {
    bottom: 100px;
  }
  from {
    bottom: 0;
  }
}

@-o-keyframes pulse {
  to {
    bottom: 100px;
  }
  from {
    bottom: 0;
  }
}

@-moz-keyframes pulse {
  to {
    bottom: 100px;
  }
  from {
    bottom: 0;
  }
}

@keyframes pulse {
  to {
    bottom: 100px;
  }
  from {
    bottom: 0;
  }
}

._navegacion li a {display: block;}

._navegacion a {
    height:100%;
    width: 100%;
    display: block;
}

._navegacion {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row;
/*justify-content: flex-end;*/
  justify-content: center;
  flex-wrap: wrap;
}

.nariz {
  background: # B11735;
        width: 34 px;
        height: 34 px;
        border - radius: 100 % ;
        border: 1 px solid black;
        margin: 0 auto;
        position: relative;
        top: -8 px;
    }

    .palonariz {
        width: 2 px;
        height: 20 px;
        margin: 0 auto;
        background - color: black;
        position: relative;
        top: -8 px;
    }

    .lunar {
        width: 10 px;
        height: 10 px;
        border - radius: 100 % ;
        border: 1 px solid# fff;
        position: absolute;
        background: white;
        top: 6 px;
        left: 8 px;
    }

    .iris1 {
        width: 6 px;
        height: 3 px;
        background: white;
        border - radius: 100 % ; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(180 deg);
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto
    }

    .iris2 {
        width: 6 px;
        height: 3 px;
        background: white;
        border - radius: 100 % ; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(180 deg);
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto
    }

    .corazon {
        position: relative;
        width: 100 px;
        height: 90 px;
        margin: 0 auto;

        top: -50 px; -
        webkit - transform: rotate(180 deg); -
        ms - transform: rotate(180 deg); -
        o - transform: rotate(180 deg);
        transform: rotate(180 deg);
    }

    .corazon::before, .corazon::after {
        content: "";
        position: absolute;
        left: 50 px;
        top: 0;
        width: 50 px;
        display: block;
        height: 80 px;
        background: #CA2533; -
        webkit - border - radius: 50 px 50 px 0 0; -
        moz - border - radius: 50 px 50 px 0 0; -
        ms - border - radius: 50 px 50 px 0 0; -
        o - border - radius: 50 px 50 px 0 0;
        border - radius: 50 px 50 px 0 0;


        -
        webkit - transform: rotate(-45 deg); -
        ms - transform: rotate(-45 deg); -
        o - transform: rotate(-45 deg);
        transform: rotate(-45 deg);

        -
        webkit - transform - origin: 0 100 % ; -
        moz - transform - origin: 0 100 % ; -
        ms - transform - origin: 0 100 % ; -
        o - transform - origin: 0 100 % ;
        transform - origin: 0 100 % ;
    }

    .corazon::after {
        left: 0; -
        webkit - transform: rotate(45 deg); -
        ms - transform: rotate(45 deg); -
        o - transform: rotate(45 deg);
        transform: rotate(45 deg);

        -
        webkit - transform - origin: 100 % 100 % ; -
        moz - transform - origin: 100 % 100 % ; -
        ms - transform - origin: 100 % 100 % ; -
        o - transform - origin: 100 % 100 % ;
        transform - origin: 100 % 100 % ;
    }

    .huevo {
        width: 142 px;
        height: 172 px;
        background: #35A1C9;
    border: 2px solid black;
    -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -ms-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -o-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    margin: 0 auto;
    position: relative;
    top: -100px;
    z-index: 2;
}

.ovalocesta {
    width: 100px;
    height: 60px;
    margin: 0 auto;
    background: white;
    -moz-border-radius: 100px / 60px;
    -webkit-border-radius: 100px / 60px;
    border-radius: 100px / 60px;
    position: relative;
    top: 40px;
}

.cesta {
     width: 60px; 
     height: 30px; 
     -moz-border-radius: 60px 60px 0 0;
     -webkit-border-radius: 60px 60px 0 0;
     border-radius: 60px 60px 0 0;
     background: white;
     border: 2px solid black;
     position: absolute; 
     right: 0;
     top: 0;
     left: 0;
     bottom: -20px;
     margin: auto;
     z-index: 2;
     -moz-transform: rotate(180deg);
     -webkit-transform: rotate(180deg);
}

.campana {
    width: 35px;
    height: 35px;
    border: 2px solid black;
    border-radius: 100%;
    background-color: # F19629;
        position: absolute;
        right: 0;
        top: 0;
        left: 0;
        bottom: -60 px;
        margin: auto;
        z - index: 3;
    }

    .bolanegra {
        width: 8 px;
        height: 8 px;

        border - radius: 100 % ;
        background - color: black;
        position: absolute;
        right: 0;
        top: 8 px;
        left: 0;
        bottom: 0;
        margin: auto;
    }

    .palonegro {
        width: 2 px;
        height: 15 px;
        background - color: black;
        margin: 0 auto; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(90 deg);
        position: relative;
        top: 18 px;
    }

    .bufanda {
        width: 100 px;
        height: 50 px;
        margin: 0 auto;
        background: #A1172E; -
        moz - border - radius: 100 px / 50 px; -
        webkit - border - radius: 100 px / 50 px;
        border - radius: 100 px / 50 px;
        position: relative;
        top: 55 px;
        z - index: 2;
    }

    ._pie {
        margin: 0 auto;
    }

    ._pie li {
        margin: -2 px;
    }

    ._pie li a {
        display: block;
    }

    ._pie a {
        height: 100 % ;
        width: 100 % ;
        display: block;
    }

    ._pie {
        display: flex;
        align - items: center;
        align - content: center;
        flex - direction: row;
        /*justify-content: flex-end;*/
        justify - content: center;
        flex - wrap: wrap;
        position: relative;
        bottom: 150 px;
    }


    .pie1 {
        width: 55 px;
        height: 77 px;
        margin: 0 auto;
        background: white; -
        moz - border - radius: 55 px / 77 px; -
        webkit - border - radius: 55 px / 77 px;
        border - radius: 55 px / 77 px;
        border: 2 px solid black; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(180 deg);
    }

    .pie2 {
        width: 55 px;
        height: 77 px;
        margin: 0 auto;
        background: white; -
        moz - border - radius: 55 px / 77 px; -
        webkit - border - radius: 55 px / 77 px;
        border - radius: 55 px / 77 px;
        border: 2 px solid black; -
        moz - transform: rotate(180 deg); -
        webkit - transform: rotate(180 deg);
    }

    ._brazos {
        margin: 0 auto;
    }

    ._brazos li {
        margin: 0;
    }

    ._brazos li a {
        display: block;
    }

    ._brazos a {
        height: 100 % ;
        width: 100 % ;
        display: block;
    }

    ._brazos {
        display: flex;
        align - items: center;
        align - content: center;
        flex - direction: row;
        /*justify-content: flex-end;*/
        justify - content: center;
        flex - wrap: wrap;
    }


    .brazo1 {
        width: 55 px;
        height: 85 px;
        margin: 0 auto;
        background: #35A1C9;
   -moz-border-radius: 55px / 85px;
   -webkit-border-radius: 55px / 85px;
   border-radius: 55px / 85px;
   border: 2px solid black; 
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   position: relative;
   top: -90px;
   left: -46px;
}

.brazo2 {
   width: 55px;
   height: 77px;
   margin: 0 auto;
   background: # 35 A1C9; -
        moz - border - radius: 55 px / 85 px; -
        webkit - border - radius: 55 px / 85 px;
        border - radius: 55 px / 85 px;
        border: 2 px solid black; -
        moz - transform: rotate(45 deg); -
        webkit - transform: rotate(45 deg);
        position: relative;
        top: -90 px;
        right: -46 px;
    }

    .mano1 {
        width: 60 px;
        height: 60 px;
        border - radius: 100 % ;
        background - color: white;
        border: 2 px solid black;

        position: absolute;
        right: -3 px;
        top: -34 px;
    }

    .mano2 {
        width: 60 px;
        height: 60 px;
        border - radius: 100 % ;
        background - color: white;
        border: 2 px solid black;

        position: absolute;
        left: -3 px;
        top: -34 px;
    }

    .bigotes {
        z - index: 9999;
        position: relative;
        float: left;
        display: inline - block;
        top: 59 px;
        left: 16 px;

    }

    .b1 {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto;
        margin - bottom: 18 px; -
        moz - transform: rotate(25 deg); -
        webkit - transform: rotate(25 deg);
    }

    .b2 {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto;
        margin - bottom: 10 px;
    }

    .b3 {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto; -
        moz - transform: rotate(-10 deg); -
        webkit - transform: rotate(-10 deg);
    }

    .bigotes2 {
        z - index: 9999;
        position: relative;
        float: right;
        display: inline - block;
        top: 59 px;
        right: 16 px;

    }

    .b1_ {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto;
        margin - bottom: 18 px; -
        moz - transform: rotate(-25 deg); -
        webkit - transform: rotate(-25 deg);
    }

    .b2_ {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto;
        margin - bottom: 10 px;
    }

    .b3_ {
        width: 60 px;
        height: 2 px;
        background - color: black;
        margin: 0 auto; -
        moz - transform: rotate(10 deg); -
        webkit - transform: rotate(10 deg);
    }

/* Safari 4.0 - 8.0 */
@ - webkit - keyframes volar {
    0 % {
        top: 0 px;left: 0 px;
    }
    25 % {
        top: 0 px;left: 100 px;
    }
    50 % {
        top: 100 px;left: 100 px;
    }
    75 % {
        top: 100 px;left: 0 px;
    }
    100 % {
        top: 0 px;left: 0 px;
    }
}
@ - moz - keyframes volar {
    0 % {
        top: 0 px;left: 0 px;
    }
    25 % {
        top: 0 px;left: 100 px;
    }
    50 % {
        top: 100 px;left: 100 px;
    }
    75 % {
        top: 100 px;left: 0 px;
    }
    100 % {
        top: 0 px;left: 0 px;
    }
}
@ - ms - keyframes volar {
    0 % {
        top: 0 px;left: 0 px;
    }
    25 % {
        top: 0 px;left: 100 px;
    }
    50 % {
        top: 100 px;left: 100 px;
    }
    75 % {
        top: 100 px;left: 0 px;
    }
    100 % {
        top: 0 px;left: 0 px;
    }
}
@ - o - keyframes volar {
    0 % {
        top: 0 px;left: 0 px;
    }
    25 % {
        top: 0 px;left: 100 px;
    }
    50 % {
        top: 100 px;left: 100 px;
    }
    75 % {
        top: 100 px;left: 0 px;
    }
    100 % {
        top: 0 px;left: 0 px;
    }
}

@keyframes volar {
    0 % {
        top: 0 px;
    }
    25 % {
        top: 0 px;
    }
    50 % {
        top: 50 px;
    }
    75 % {
        top: 50 px;
    }
    100 % {
        top: 0 px;
    }
}