Cara Membuat Animasi Border Rainbow dengan CSS

Cara Membuat Animasi Border Rainbow dengan CSS - Membuat border pada suatu objek denagn CSS mungkin sudah biasa, tapi pernahkah kalian membuat animasi border rainbow dengan CSS ? jika belum pernah dan penasaran ingin membuatnya, berikut akan saya bagikan tutorial sederhana bagaimana Cara Membuat Animasi Border Rainbow dengan CSS. Sama halnya seperti membuat border biasa dengan CSS, membuat animasi border rainbow hanya menambahkan beberapa properti untuk membuat animasi dan warna rainbow (pelangi). Berikut langkah - langkah Membuat Animasi Border Rainbow dengan CSS.

Langkah 1 : Cara Membuat Animasi Border Rainbow dengan CSS

Baiklah, langkah pertama silahkan kalian buat file dengan nama index.html kemudian ketikan sintak untuk struktur awal dan membuat konten berupa teks seperti berikut. Kebetulan pada kasus ini yang akan dikenai animasi border adalah konten teks.

<body>
    <p>
        <span>D</span>
        <span>U</span>
        <span>M</span>
        <span>E</span>
        <span>T</span>
        <span>S</span>
        <span>C</span>
        <span>H</span>
        <span>O</span>
        <span>O</span>
        <span>l</span>
        <span>.</span>
    </p>
</body>

Langkah 2 : Cara Membuat Animasi Border Rainbow dengan CSS

Langkah selanjutnya, barulah kita mendesain tampilan untuk membuat border dan membuat animasi border rainbow dengan memanfaatkan properti CSS yakni transition untuk animasinya dan background untuk warna rainbow (pelangi). Silahkan ketikan sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Artifika');
body {
    font-family: 'Artifika', serif;
    font-weight:bold;
}
p {
    text-align:center;
    font-size:64pt;
}
span {
    cursor:pointer;
    -webkit-transition-property: background;
    -webkit-transition-duration: 5s;
    -webkit-transition-timing-function: ease-out;
    color:#222;
    text-shadow:0px 0px 5px #ffffff;
    background: -webkit-linear-gradient(
        left,  
        rgba(255,0,0,1) 0%,
        rgba(255,255,0,1) 19%,
        rgba(0,255,0,1) 38%,
        rgba(0,255,255,1) 51%,
        rgba(0,0,255,1) 67%,
        rgba(255,0,255,1) 83%,
        rgba(255,0,0,1) 99%
        );
    -webkit-text-stroke: 5px rgba(255,255,255,.01);
    -webkit-background-clip: text;

}
span:hover {
    -webkit-transition-property: background;
    -webkit-transition-duration: 4s;
    -webkit-transition-timing-function: ease-out;
    background: -webkit-linear-gradient(
        right,  
        rgba(255,0,0,1) 0%,
        rgba(255,255,0,1) 19%,
        rgba(0,255,0,1) 38%,
        rgba(0,255,255,1) 51%,
        rgba(0,0,255,1) 67%,
        rgba(255,0,255,1) 83%,
        rgba(255,0,0,1) 99%
        );
    background-position:100px;
    -webkit-background-clip: text;
}

Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan kembali filenya kemudian kalian bisa membuka pada browser masing - masing untuk melihat hasil akhirnya. Selesai

Baik, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Animasi Border Rainbow dengan CSS, semoga tutorial ini bisa bermanfaat, sampai jumpa pada tutorial selanjutnya :)

21 Juni 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat