Dalam kesempatan kali ini saya ingin membagikan tutorial tentang Cara Membuat Animasi Background Teks Radial Dengan CSS. Animasi background yang dibuat yaitu berbentuk radial atau lingkaran. Efek animasi yang tampil setelah teks diberikan efek hover. Bagaimana cara membuatnya yuk simak langkah-langkah berikut:Pertama sahabat buat file html yang berisi code brikut:

<span class="wrap">Animasi Radial</span>

Jadi content teks yang akan menampilkan background efek radial didalam tulisan Animasi Radial.

Kedua tentu saja menambahkan style dari CSS seperti code dibawah ini:

@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
		*{box-sizing: border-box;}
		body{
			min-height: 100vh;
			margin:0;
			background: #070707;
			font-family: 'Bangers', cursive;
			font-weight: 700;
			font-size: 16rem;
			text-transform: uppercase;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		span{
			cursor: pointer;
			-webkit-text-stroke-color:#ffffff;
			-webkit-text-stroke-width:2px;
			-webkit-text-fill-color:transparent;
			-webkit-background-clip:text;
			background-repeat: no-repeat;
			transition: background-size 1s cubic-bezier(0.50,0.01,0.15,0.98); // efek transisi background tampil
		}
		.wrap:hover{
			-webkit-background-size:150% 750%;
			background-size:150% 750%; // size background yang ditampilkan
		}
		.wrap{
			background-image: radial-gradient(circle, #f1c12d 0%, #e04936 35% ,#e16393 50%, transparent 50%); // efek warna background
			background-position: 50% 50%;
			-webkit-background-size:0% 0%;
			background-size: 0% 0%;
		}

Ya code diatas yang digunakan untuk memberikan efek animasi background, Baiklah jika sudah lanjut disimpan kemudian buka pada browser masing-masing lihat hasilnya apakah seperti tampilan berikut:

cara membuat-animasi-background-teks-radial-dengan-css-edi-270420

Jadi saat teks dihover animasi background radial muncul. Saya rasa cukup pembahasan artikel ini semoga bermanfaat dan samapi jumpa.

terima kasih.

WhatsApp chat