Hot!

Animasi Wajah Tersenyum Dengan HTML Dan CSS

Animasi Wajah Tersenyum Dengan HTML Dan CSS


Saya telah mempresentasikan cara menggambar wajah dengan HTML + CSS biasa dan kami juga telah belajar tentang animasi kerangka tombol CSS . Ayo gabungkan keduanya dan buat wajah yang terus bergerak dengan mata yang berkedip melihat sekeliling dan dengan mulut yang tersenyum. Mari kita lakukan ini menggunakan HTML5 CSS3 biasa!
menggambar cfr3 smiley keyframe animasi
Lihatlah gambar langsung di halaman utama HTML CSS JavaScript atau edit kode di JSFiddle .
Kita perlu membangun struktur kepala terlebih dahulu. Kami menggunakan div untuk kepala dengan perbatasan hitam bulat dan latar belakang putih. Ini akan membungkus kedua mata dengan kelopak mata dan pupil di dalamnya. Akhirnya kami tambahkan mulut. Ini akan menjadi div kosong dengan batas bawah dengan ujung bulat membuat ilusi mulut tersenyum.

Kode HTML

Sekarang kita memiliki kerangka HTML Bob (karena itulah saya memanggilnya).
< div  id = "cssHead" > 
    < div  class = "cssEye leftEye" > 
        < div  class = "cssEyeLid" > 
            < div  class = "cssPupil" > 
            </ div > 
        </ div > 
    </ div > 
    < div  class = " cssEye rightEye " > 
        < div  class = " cssEyeLid " > 
            <div  class = "cssPupil" >                       
            </div > 
        </ div > 
    </ div > 
    < div  class = "cssMouth" > 
    </ div >           
</ div >

Styling div agar terlihat seperti kepala

Bagi mereka yang berpengalaman dengan gaya CSS ini seharusnya tidak menjadi masalah besar. Anda mungkin ingin membuat desain sendiri. Inilah cara saya menata Bob:
#cssHead {
     margin : 20 px  otomatis ;
    lebar : 180 px ;
    warna latar : #fff ;
    tinggi : 180 px ;
    -webkit- batas-radius : 500 px ;
    batas-radius : 500 px ;
    perbatasan : 3 px  solid  # 000 ;
    -moz-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg );
    -webkit-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg );
    -o-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg );
    -ms-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg );
    transform: rotate ( -2 deg ) condong ( -3 deg , -2 deg );
}
.cssEye {
     display : inline-block ;
}
.cssPupil {
     width : 12 px ;
    latar belakang : # 000 ;
    tinggi : 12 px ;
    margin : 6 px  0 px  3 px  8 px ;
    -webkit- border-radius : 20 px ;
    batas-radius : 20 px ;
}
.cssEyeLid {
     border : 1 px  solid  # 000 ;
    -webkit- border-radius : 20 px ;
    batas-radius : 20 px ;
    overflow : disembunyikan ;
    tinggi : 20 px ;
    margin : 0 ;
}
.htmlEye {
     border : 1 px  solid  # 000 ;
    display : inline-block ;
    -webkit- border-radius : 20 px ;
    batas-radius : 20 px ;
}
.wraphtmlEye {
     background-color : #DDD ;
    margin : 6 px ;
    padding : 4 px ;
    lebar : 25 px ;
    tinggi : 25 px ;
}
.htmlPupil {
     width : 12 px ;
    latar belakang : # 000 ;
    tinggi : 12 px ;
    margin : 6 px  4 px  3 px ;
    -webkit- border-radius : 20 px ;
    batas-radius : 20 px ;
}
.rightEye {
     margin : 0 ;
}
.leftEye {
     margin : 50 px  4 px  0 px  66 px ;
}
.cssMouth {
     border-top : none ;
    border-right : tidak ada ;
    border-left : tidak ada ;
    border-bottom : 4 px  solid  # 000 ;
    -webkit- border-radius : 100 px ;
    batas-radius : 100 px ;
    tinggi : 20 px ;
    lebar : 45 px ;
    margin : 0 px  otomatis  0 ;
}
Saya pikir tidak ada banyak yang harus dijelaskan tentang kode tersebut. Bukan masalah besar, hanya beberapa perbatasan di sekitar div yang diposisikan.

Animasi CSS3 Menggunakan Keyframes

Gaya di atas tidak akan membuat Bob bergerak, kita harus mengatur animasi juga. Saya mengatur gerakan berulang berulang untuk menggoyangkan kepala, memindahkan pupil, berkedip dan menggerakkan mulut. Saya mengatur berbagai durasi siklus untuk setiap efek untuk menghindari ilusi pengulangan.

Animasi Kepala

Saya mengatur siklus 10 detik dan selama kepala Bob ini, elemen div membungkus mata dan mulut melewati beberapa rotasi.
/ * Animasi kepala CSS BEGIN * / 
#cssHead {
    -webkit-animation: headRotations 10 s infinite;
    animasi: headRotations 10 s tak terbatas;
}
@ -webkit-keyframes headRotations {
    0% {-webkit-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg ); }
    20% {-webkit-transform: rotate ( 2 deg ) condong ( -3 deg , -2 deg ); }
    25% {-webkit-transform: rotate ( -4 deg ) condong ( -3 deg , -2 deg ); }
    28% {-webkit-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg ); }
    40% {-webkit-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg ); }
    50% {-webkit-transform: rotate ( 2 deg ) condong ( -3 deg , -2 deg ); }
    60% {-webkit-transform: rotate ( -6 deg ) condong ( -3 deg , -2 deg ); }
    70% {-webkit-transform: rotate ( 6 deg ) condong ( -3 deg , -2 deg ); }
    90% {-webkit-transform: rotate ( 6 deg ) condong ( -3 deg , -2 deg ); }
    100% {-webkit-transform: memutar ( -2 deg ) condong ( -3 deg , -2 deg ); }
}
@keyframes headRotations {
    0% {transform: rotate ( -2 deg ) condong ( -3 deg , -2 deg ); }
    20% {transform: rotate ( 2 deg ) condong ( -3 deg , -2 deg ); }
    25% {transform: rotate ( -4 deg ) condong ( -3 deg , -2 deg ); }
    28% {transform: rotate ( -2 deg ) condong ( -3 deg , -2 deg ); }
    40% {transform: rotate ( -2 deg ) condong ( -3 deg , -2 deg ); }
    50% {transform: rotate ( 2 deg ) condong ( -3 deg , -2 deg ); }
    60% {transform: rotate ( -6 deg ) condong ( -3 deg , -2 deg ); }
    70% {transform: rotate ( 6 deg ) condong ( -3 deg , -2 deg ); }
    90% {transform: rotate ( 6 deg ) condong ( -3 deg , -2 deg ); }
    100% {transform: rotate ( -2 deg ) condong ( -3 deg , -2 deg ); }
}
/ * Animasi kepala CSS END * /

Animasi Mata

Mata memiliki efek berkedip dan terus menerus melihat sekeliling. Untuk menciptakan ilusi menjelajahi sekitar, saya menggerakkan kedua murid bersama untuk menghindari menyipit.
Efek berkedip dibuat dengan mengurangi ketinggian kelopak mata menjadi 0. Kelopak mata adalah div yang membentuk pupil.
/ * Animasi murid CSS BEGIN * / 
.cssPupil {
    -webkit-animation: lookingAround 20 s infinite;
    animasi: lookingAround 20 s tak terbatas;
}
@ -webkit-keyframes lookingAround {
    0% {     margin : 6 px  0 px  3 px  8 px ; }
    10% {    margin : 6 px  0 px  3 px  8 px ; }
    12% {    margin : 6 px  8 px  3 px  0 px ; }
    27% {    margin : 6 px  8 px  3 px  0 px ; }
    30% {    margin : 6 px  0 px  3 px  8 px ; }
    40% {    margin : 6 px  0 px  3 px  8 px ; }
    43% {    margin : 1 px  0 px  8 px  8 px ; }
    46% {    margin : 6 px  0 px  3 px  8 px ; }
    57% {    margin : 6 px  0 px  3 px  8 px ; }
    60% {    margin : 6 px  8 px  3 px  0 px ; }
    63% {    margin : 6 px  0 px  3 px  8 px ; }
    77% {    margin : 6 px  0 px  3 px  8 px ; }
    80% {    margin : 6 px  4 px  3 px  4 px ; }
    85% {    margin : 6 px  4 px  3 px  4 px ; }
    88% {    margin : 6 px  0 px  3 px  8 px ; }
    92% {    margin : 6 px  0 px  3 px  8 px ; }
    100% {   margin : 6 px  0 px  3 px  8 px ; }
}
@keyframes lookingAround {
    0% {     margin : 6 px  0 px  3 px  8 px ; }
    10% {    margin : 6 px  0 px  3 px  8 px ; }
    12% {    margin : 6 px  8 px  3 px  0 px ; }
    27% {    margin : 6 px  8 px  3 px  0 px ; }
    30% {    margin : 6 px  0 px  3 px  8 px ; }
    40% {    margin : 6 px  0 px  3 px  8 px ; }
    43% {    margin : 1 px  0 px  8 px  8 px ; }
    46% {    margin : 6 px  0 px  3 px  8 px ; }
    57% {    margin : 6 px  0 px  3 px  8 px ; }
    60% {    margin : 6 px  8 px  3 px  0 px ; }
    63% {    margin : 6 px  0 px  3 px  8 px ; }
    77% {    margin : 6 px  0 px  3 px  8 px ; }
    80% {    margin : 6 px  4 px  3 px  4 px ; }
    85% {    margin : 6 px  4 px  3 px  4 px ; }
    88% {    margin : 6 px  0 px  3 px  8 px ; }
    92% {    margin : 6 px  0 px  3 px  8 px ; }
    100% {   margin : 6 px  0 px  3 px  8 px ; }
}
/ * CSS pupils animation END * / 
/ * CSS blinking BEGIN * / 
.cssEyeLid {
    -webkit-animation: blinkingEye 7 s infinite;
    animasi: blinkingEye 7 s tak terbatas;
}
@ -webkit-keyframes blinkingEye {
    0% {     tinggi : 20 px ;   margin : 0 ; }
    58% {    tinggi : 20 px ;   margin : 0 ; }
    60% {    tinggi : 0 px ;    margin : 10 px  0 ; }
    66% {    tinggi : 20 px ;   margin : 0 ; }
    100% {   tinggi : 20 px ;   margin : 0 ; }
}
@keyframes blinkingEye {
    0% {     tinggi : 20 px ;   margin : 0 ; }
    58% {    tinggi : 20 px ;   margin : 0 ; }
    60% {    tinggi : 0 px ;    margin : 10 px  0 ; }
    66% {    tinggi : 20 px ;   margin : 0 ; }
    100% {   tinggi : 20 px ;   margin : 0 ; }
}
/ * CSS berkedip AKHIR * /

Mulut

Karakter gambar CSS kami membutuhkan mulut untuk tersenyum. Efeknya dibuat dengan mengurangi batas bagian bawah mulut ke ukuran yang lebih kecil kemudian menguranginya ke ukuran dan posisi awal
/ * Animasi CSS tersenyum BEGIN * / 
.cssMouth {
    -webkit-animation: smilingMouth 8 s infinite;
    animasi: smilingMouth 8 s tak terbatas;
}
@ -webkit-keyframes smilingMouth {
    0% {     tinggi : 20 px ;   border-bottom : 3 px  solid  # 000 ;  margin : 0 px  otomatis  0 ; }
    20% {    tinggi : 35 px ;   border-bottom : 6 px  solid  # 000 ;  margin : -10 px  auto  0 ; }
    80% {    tinggi : 35 px ;   border-bottom : 6 px  solid  # 000 ;  margin : -10 px  auto  0 ; }
    100% {   tinggi : 20 px ;   border-bottom : 3 px  solid  # 000 ;  margin : 0 px  otomatis  0 ; }
}
@keyframes smilingMouth {
    0% {     tinggi : 20 px ;   border-bottom : 3 px  solid  # 000 ;  margin : 0 px  otomatis  0 ; }
    20% {    tinggi : 35 px ;   border-bottom : 6 px  solid  # 000 ;  margin : -10 px  auto  0 ; }
    80% {    tinggi : 35 px ;   border-bottom : 6 px  solid  # 000 ;  margin : -10 px  auto  0 ; }
    100% {   tinggi : 20 px ;   border-bottom : 3 px  solid  # 000 ;  margin : 0 px  otomatis  0 ; }
}
/ * CSS smiling animation END * /
Perhatikan bahwa dalam setiap siklus animasi frame terakhir (100%) kembali ke keadaan awal (0%) untuk menghindari lompatan.

0 komentar:

Posting Komentar

Daftar Isi