Cara Membuat Animasi Rotasi Border dengan CSS

21/05/2019    Risman Hakim    171     Website

Cara Membuat Animasi Rotasi Border dengan CSS - Animasi sudah menjadi bagian penting ketika kita sedang membuat desain web, karena dengan adanya animasi atau efek pada suatu elemen akan menjadikan layout web terlihat lebih menarik dan lebih hidup. Banyak sekali animasi yang bisa kita buka dengan CSS, jQuery atau pun dengan yang lainn nya yang bisa di muat dalam halaman website. Nah, Kali ini saya berbagi sedikit tutorial sederhana yang mungkin bisa bermanfaat buat kalian yang sedang belajar HTML dan CSS, tutorial CSS berikut adalah tentang bagaimana Cara Membuat Animasi Rotasi Border dengan CSS. Simak langkah - langkah berikut ini.

Kode HTML

Baik, kita mulai membuat animasi border dengan membuat kerangka atau layout untuk border dengan kode HTML seperti berikut.

<body>
    <div class="border"></div>
</body>

Kode CSS

Setelah membuat kerangka HTML sederhana seperti diatas, langkah selanjutnya barulah kita membuat animasi rotasi border dengan kode CSS. 

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
*, *::before, *::after {
  box-sizing: border-box;
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.border {
    position: relative;
    z-index: 0;
    width: 400px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
}
.border::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#FFC107, #FFC107), 
                    linear-gradient(#3F51B5, #3F51B5), 
                    linear-gradient(#E91E63, #E91E63), 
                    linear-gradient(#4CAF50, #4CAF50);
    animation: rotate 4s linear infinite;
}
.border::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 10px;
    top: 10px;
    width: calc(95% - 0px);
    height: calc(93% - 0px);
    background: white;
    border-radius: 5px;
}

Nah, dengan CSS sekarang ini kita sudah bisa membuat animasi sederhana dan efek seperti kasus yang kita buat sekarang. Setelah semua sintak HTML dan CSS telah diketikan, simpan file nya kemudian silahkan kalian buka pada browser masing - masing dan lihat hasil nya.

Menarik bukan animasi yang di tampilkan ? dengan tambahan animasi seperti ini di jamin halaman website kalian akan terlihat lebih hidup dan tentunya enak di lihat. Baik, cukup sekian tutorial sederhana tentang bagaimana Cara Membuat Animasi Rotasi Border dengan CSS semoga tutorial ini bermanfaat. Selamat mencoba dan sampai jumpa lagi di artikel selanjutnya :)

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More