Cara Membuat Teks Animasi Melayang Dengan CSS

Cara Membuat Teks Animasi Melayang Dengan CSS
Cara membuat teks animasi 
Melayang Dengan CSS

  Dengan adanya CSS3 saat ini membuat lebih mudah developer untuk mendesain suatu tam-pilan website,selain itu CSS3 juga bisa membuat efek dan animasi sederhana yang lumayan menarik. Misalnya saja kita bisa membuat animasi berjalan, animasi warna dan lain sebagai-Nya. Nahh kali ini mimin akan bagkkan tutorialAnimasi dengan CSS3 yakni membuat teks aniMasi melayang Dengan CSS. yuk kita simak.

Langkah 1

  Baik, kita mulai membuat animasi melayang dengan membuat struktur HTML terlebih dahulu dan memasukan huruf sebagai animasi-Nya. Silahlan kalian bisa memasukan teks sepe-Ti berikut.

[
<body>
    <div class="wrapper">
      <div class="items" id="items1">D</div>
      <div class="items" id="items2">U</div>
      <div class="items" id="items3">M</div>
      <div class="items" id="items4">E</div>
      <div class="items" id="items5">T</div>
    </div>
</body>
]

Langkah 2

Setelah membuat struktur html seperti diatas,selanjutnya kita akan mendesain tampilan dan juga animasi teks melayang dengan cara mengetikan sintak CSS3 berikut ini.

[
@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi');
body{
    font-family: 'Baloo Thambi', cursive;
}
.wrapper {
    width:800px;
    margin:auto;
}
.items {
    height:100px;
    width: 100px;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    background-color:#0984e3;
    float:left;
    font-size:100px;
    padding:20px;
    color:#fff;
    margin-top: 100px;
}
@keyframes animate {
  from { transform:translate(0px, 1000px) }
  to   { transform:translate(0px, 0px) }
}
#items1 { animation:animate 4s; }
#items2 { animation:animate 1s; }
#items3 { animation:animate 5s; }
#items4 { animation:animate 3s; }
#items5 { animation:animate 2s; }]

  Pada sintak CSS3 diatas, kita bisa lihat adaProperty transform dan animation yang ber-
fungsi sebagai animasi utama yang ditunjukanKepada objek teks. 

 Setelah semua sintak telah diketikan, silahkansimpan filenya kemudian kalian bisa buka padabrowser masing-masing dan lihat hasilnya. Maka ketika browser dibuka otomatis teks yang kita buat akan melayang ke arah atas Browser.

 Baiklah, mungkin cukup sekian tutorial seder-hana mengenai membuat animasi melayang
dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah wawasan.

(Fathur/Tekloggers)

Disclamer And Support:

Semua artikel dalam Situs kami dilindungi oleh Google DCMA, Jika ada oknum yang copas tanpa seizin admin mohon segera diubah / dilaporkan sebelum blog kalian down.Dukung kami dengan memberikan komentar , Donasi , Ataupun Likes Fanspages kami untuk mendapatkan info menarik lainnya.

DonateFansapgeDiscord

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan newsletter kami

Notification
Agar Tidak Ketinggalan Postingan / Artikel Terupdate Dari Kami Kliknya follow
Done