Dengan menggunakan Css kita juga dapat mempercepat halaman web, meudahkan pengeloaan kode, menawarkan lebih banyak variasi tampilan, membuat website menjadi rapi dan menarik.
Untuk itu mari langsung saja kita Membuat Animasi Border Gredient dengan Css :
![]() |
Output |
Kode HTML
Pada bagian ini kita perlu untuk membuat suatu file dengan ektensi .html kemudian kita akan membuat suatu class di dalam tag div dengan nama card atau Anda bisa juga membuat class dengan nama bebas dan taruh di dalam body.
<div class="card">
<span>CARD</span>
</div>
Kode CSS
Lalu pada bagian ini kita akan menggunakan css untuk membuat tampilan tersebut. Anda bisa buat file baru dengan nama style dan ekstensi .css atau langsung saja tambahkan css di antara <head> dan </head>.
<style>
.card{
display: grid;
place-items: center;
position: relative;
height: 150px;
width: 150px;
background: #191919;
border-radius: 10px;
overflow: hidden;
box-shadow: -4px 2px 6px 0px rgba(0,0,0,0.51);
}
.card::before{
content: '';
width: 60px;
height: 300px;
left: 10px;
top: -70px;
position: absolute;
background: linear-gradient(#00e5ff, #b400fb);
animation: animate 5s linear infinite;
}
@keyframes animate{
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.card::after{
content: '';
position: absolute;
background: #191919;
inset: 4px;
border-radius: 7px;
}
</style>
Kode Lengkap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SarjanaIT - Membuat Animasi Border Gredient dengan Css</title>
<style>
.card{
display: grid;
place-items: center;
position: relative;
height: 150px;
width: 150px;
background: #191919;
border-radius: 10px;
overflow: hidden;
box-shadow: -4px 2px 6px 0px rgba(0,0,0,0.51);
}
.card::before{
content: '';
width: 60px;
height: 300px;
left: 10px;
top: -70px;
position: absolute;
background: linear-gradient(#00e5ff, #b400fb);
animation: animate 5s linear infinite;
}
@keyframes animate{
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.card::after{
content: '';
position: absolute;
background: #191919;
inset: 4px;
border-radius: 7px;
}
</style>
</head>
<body>
<div class="card">
<span>CARD</span>
</div>
</body>
</html>
Oke kurang lebih seperti itu ya untuk css tricks-nya. Kita akan belajar lebih banyak lagi tentang Css pada artikel-artikel selanjutnya.
Social Media