Hallo sahabat, berjumpa lagi dalam web Dumet School 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 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:

cara-membuat-animasi-text-efek-hover-dengan-html-css-edi-250420 cara_membuat-animasi-text-efek-hover-dengan-html-css-edi-250420

Demikian pembahasan kali ini mengenai Animasi teks efek hover. semoga bermanfaat dan sampai jumpa dilain kesempatan.

terima kasih

WhatsApp chat