CSS3 Pelangi

Tabel Konten
  1. CSS 
  2. HTML 
  • Eksperimen Sejenis Lainnya 
  • CSS 

    a.rainbow {
      color:white;
      text-decoration:none;
      -webkit-animation:rainbow 2s linear infinite alternate;
      -moz-animation:rainbow 2s linear infinite alternate;
      -ms-animation:rainbow 2s linear infinite alternate;
      -o-animation:rainbow 2s linear infinite alternate;
      animation:rainbow 2s linear infinite alternate;
    }
    
    @-webkit-keyframes rainbow {
        0%   {color:red;        }
        10%  {color:orange;     }
        20%  {color:gold;       }
        30%  {color:yellow;     }
        40%  {color:yellowgreen;}
        50%  {color:green;      }
        60%  {color:cyan;       }
        70%  {color:blue;       }
        80%  {color:violet;     }
        90%  {color:magenta;    }
        100% {color:indigo;     }
    }
    @-moz-keyframes rainbow {
        0%   {color:red;        }
        10%  {color:orange;     }
        20%  {color:gold;       }
        30%  {color:yellow;     }
        40%  {color:yellowgreen;}
        50%  {color:green;      }
        60%  {color:cyan;       }
        70%  {color:blue;       }
        80%  {color:violet;     }
        90%  {color:magenta;    }
        100% {color:indigo;     }
    }
    @-ms-keyframes rainbow {
        0%   {color:red;        }
        10%  {color:orange;     }
        20%  {color:gold;       }
        30%  {color:yellow;     }
        40%  {color:yellowgreen;}
        50%  {color:green;      }
        60%  {color:cyan;       }
        70%  {color:blue;       }
        80%  {color:violet;     }
        90%  {color:magenta;    }
        100% {color:indigo;     }
    }
    @-o-keyframes rainbow {
        0%   {color:red;        }
        10%  {color:orange;     }
        20%  {color:gold;       }
        30%  {color:yellow;     }
        40%  {color:yellowgreen;}
        50%  {color:green;      }
        60%  {color:cyan;       }
        70%  {color:blue;       }
        80%  {color:violet;     }
        90%  {color:magenta;    }
        100% {color:indigo;     }
    }
    @keyframes rainbow {
        0%   {color:red;        }
        10%  {color:orange;     }
        20%  {color:gold;       }
        30%  {color:yellow;     }
        40%  {color:yellowgreen;}
        50%  {color:green;      }
        60%  {color:cyan;       }
        70%  {color:blue;       }
        80%  {color:violet;     }
        90%  {color:magenta;    }
        100% {color:indigo;     }
    }

    HTML 

    <a class="rainbow" href="#">CSS3 Pelangi</a>

    Lihat Demo

    Eksperimen Sejenis Lainnya 

    Cek halaman ini juga: CSS3 Rainbow Dividers

    2 Komentar

    • Unknown

      keren pelanginya :D

    • Bakteri

      wew :-bd deh buat bg taufic hehehe

    Komentar telah ditutup.