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.
Baca tutorial lain hanya di inpows.com
