Teks Mouse Hover HTML5 Dan CSS3 Template Mantul

Template Teks Dengan Mouse Hover HTML5 Dan CSS3

Labkom99.com – Template ini berisi beberapa teks mouse hover HTML5 dan CSS3 yang sangat keren dengan plugin efek khusus gerakan mouse. Efek teks mencakup beberapa style animasi yang berbeda saat mouse bergerak di atas teks. Beberapa efek animasi teks dibuat menggunakan SVG dan HTML5 Canvas.

Namun ada beberpa efek teks yang dibuat dengan HTML5 ini tidak dapat bekerja dengan baik browser lawas. Harap gunakan versi browser terbaru untuk melihat efek dan menjalankan teks mouse hover HTML5 ini.

Template Teks Dengan Mouse Hover HTML5 Dan CSS3

Alat Dan Bahan

Notepad

Tools Web Programming

Tutorial Lain

Membuat Efek Teks 3D Marquee Super Keren Dengan CSS3

Membuat Parallax Scrolling Dengan HTML CSS SVG Dan JQuery

Membuat Animasi Teks Dengan HTML5 Dan Canvas

Membuat Efek Animasi Teks Kartun Dengan HTML CSS3 Dan Google Font

Membuat Efek Animasi Lampu Neon Pada Teks Dengan HTML Dan CSS3

Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG

Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS

Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3

Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail

Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna

Belajar HTML5 Dan Canvas Membuat Bola Api Luncur

Metode/Langkah

Efek animasi mouse hover di atas teks HTML5 dan CSS3 ini semuanya bergantung pada elemen ::before dan elemen ::after yang dibuat. Sehingga elemen tersebut menjadikan efek animasi yang pada teks saat ada sentuhan dari mouse. Gambar pembuka merukapan contoh penggunaan elemen ::before dan elemen ::after teks “Labkom99”.

Struktur HTML

Dalam penggunaan style ini, efek animasi timbul dipicu dengan mengeklik mouse pada teks atau menyentuh teks dengan mouse.

<a class="link link--labkom99" href="#" data-letters="Labkom99">Labkom99</a>

CSS3

Secara umum pada setiap animasi hampir memiliki kesamaan dalam penggunaan CSS3 seperti dibawah ini:

.link {
  outline: none;
  text-decoration: none;
  position: relative;
  font-size: 8em;
  line-height: 1;
  color: #9e9ba4;
  display: inline-block;
}

Pada teks efek labkom99, saat mouse bergerak di atas teks, bilah putih akan berkedip dari kiri ke kanan. Warna teks yang dilewati bilah putih juga akan berubah. Efek ini dibuat menggunakan elemen ::before.

Ada elemen pseudo lain yang berisi salinan teks yang digunakan untuk mengubah lebar dan menciptakan efek tarik. Efek animasi ini akan dijalankan setelah waktu tunda, jadi hal pertama yang Anda lihat adalah efek berkedip bilah putih.

.link--labkom99 {
  text-transform: uppercase;
  font-weight: 900;
  overflow: hidden;
  line-height: 0.75;
  color: #b2b0a9;
}
 
.link--labkom99:hover {
  color: #b2b0a9;
}
 
.link--labkom99::after {
  content: '';
  position: absolute;gi
  height: 16px;
  width: 100%;
  top: 50%;
  margin-top: -8px;
  right: 0;
  background: #F9F9F9;
  transform: translate3d(-100%,0,0);
  transition: transform 0.4s;
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
 
.link--labkom99:hover::after {
  transform: translate3d(100%,0,0);
}
 
.link--labkom99::before {
  content: attr(data-letters);
  position: absolute;
  z-index: 2;
  overflow: hidden;
  color: #424242;
  white-space: nowrap;
  width: 0%;
  transition: width 0.4s 0.3s;
}
 
.link--labkom99:hover::before {
  width: 100%;
}