テキストをcssで虹色にする

2013年10月2日更新 view: 590 view
photoBy: http://isimu.co.jp/虹.JPG

テキスト を css のみで虹色にしよう

.rainbow {
    
    font-size:24px;
    font-weight:bold;
    
    
    display:inline-block;
    background-image: -webkit-gradient(linear, left top, right top,
    color-stop( 0%, red),
    color-stop( 14%, orange),
    color-stop( 28%, yellow),
    color-stop( 42%, green),
    color-stop( 56%, blue),
    color-stop( 70%, indigo),
    color-stop( 84%, violet),
    color-stop(100%, red)
    );
    -webkit-background-clip:text;
    color:transparent;
    
    -webkit-animation:rainbow 10s linear infinite alternate;
}

/* firefox全て */
.rainbow, x:-moz-any-link, x:default {
    
    color:#F00;
}

/* IE6以外全てのIE */
.rainbow { color/**/: #F00; }


@-webkit-keyframes rainbow {
     0% {background-position: 0px 0px;}
    
    /* なぜか%指定ができないため1000pxという適当な値を */
    100% {background-position:1000px 0px;}
}
スポンサードリンク

あとはお好きな要素を .rainbow にすりゃ完成。

chrome , iphone で虹色になります。
firefox , ie では赤色にしときます。(動かないので)

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

6月21日 ( 木 ) にアクセスが多かった記事はこちら!