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)

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Disqus Comments