Hallo sahabat, berjumpa lagi dalam web Dumet School kursus website private online yang mengulas seputar Website. Pada artikel saat ini saya ingin membagikan sedikit animasi text efek hover. Ya case yang akan dibuat yaitu saat teks dihover akan menampilkan teks terpotong. Yuk langsung saja ikuti langkah pembuatannya.Pertama, silahkan buka text editor masing-masing kemudian buat file html baru ketikkan code berikut:
<div class="wrap" data-text="DON'T TOUCH"></div>
ya kita butuhkan sebuah tag div yang diberi nama class=wrap dan attribute data-text:don’t touch
Kedua, kita tambahkan sebuah style CSS untuk menampilkan animasi efek hover teksnya, silahkan kawan kawan kursus website private online ketikkan code dibawah ini:
html,body{width: 100%;display: flex;align-items: center;justify-content: center;background:grey;margin-left: -160px;height: 350px}
.wrap{font-size: 5em;position: relative;color:transparent}
.wrap::before,.wrap::after{content:attr(data-text);position: absolute;top:0;left:0;color:lightyellow;transition: 0.2s}
.wrap::before{clip-path: polygon(0 0,60% 0,30% 100%,0 100%);}
.wrap::after{clip-path: polygon(60% 0,100% 0,100% 100%, 30% 100%);}
.wrap:hover::before{left:-0.15em;transform: rotate(-10deg);top:-0.05em;}
.wrap:hover::after{left:0.15em;transform: rotate(5deg);top:0.05em;}
Apabila sudah silahkan simpan code diatas, lalu jalankan pada browser kemudian langsung saja hover pada bagian teks untuk melihat hasilnya seperti gambar dibawah ini:
Demikian pembahasan kursus private bikin website online kali ini mengenai Animasi teks efek hover. semoga bermanfaat dan sampai jumpa dilain kesempatan.
terima kasih