13
July, 202012/07/2020

Membuat Animasi Border Gradient Menggunakan CSS

Membuat Animasi Border Gradient Menggunakan CSS – Pada artikel ini akan membahas bagaimana cara membuat animasi border gradient menggunakan CSS. Pembuatan dilakukan dengan menggunakan dua buah file yaitu index.html dan style.css. Border gradient dapat dibuat menggunakan border-image dengan gradient. Border yang dibuat menggunakan ukuran dan warna tertentu didalam properti border. Pada properti border-image digunakan untuk mendefinisikan gradient. Kemudian untuk animasi pada border menggunakan properti animation, properti animation-direction, dan keyframes.

Implementasi pada style.css dapat dipelajari melalui kode dibawah.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	background-color: #111;
}

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.box{
	width: 400px;
	height: 400px;
	background-color: #111;
}

.box::before{
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	bottom: -10px;
	right: -10px;
	background-image: linear-gradient(57deg, #e65c00, #F9D423, #6dd5ed, #cc2b5e, #753a88);
	background-size: 300%;
	z-index: -1;
	animation: gradient 3s linear infinite;
	animation-direction: alternate;
}

@keyframes gradient{
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-color: 0% 50%;
	}
}

Lalu, untuk menampilkan pada web browser anda dapat menyalin kode index.html berikut.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Animasi Border Gradient</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="box"></div>
	</div>
</body>
</html>

Hasil dapat dilihat pada video berikut.