本文へスキップ

[CSS]Rainbow Text - css를 이용한 텍스트에 무지개 효과

MintState 2019年3月20日 11:01 閲覧 6816

[CSS]Rainbow Text - css를 이용한 텍스트에 무지개 효과

<style>
.rainbow {
	/* Chrome, Safari, Opera */
	-webkit-animation: rainbow 3s infinite; 

	/* Internet Explorer */
	-ms-animation: rainbow 3s infinite;

	/* Standar Syntax */
	animation: rainbow 3s infinite; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow {
	0%{color: orange;}
	10%{color: purple;}
	20%{color: red;}
	30%{color: CadetBlue;}
	40%{color: yellow;}
	50%{color: coral;}
	60%{color: green;}
	70%{color: cyan;}
	80%{color: DeepPink;}
	90%{color: DodgerBlue;}
	100%{color: orange;}
}

/* Internet Explorer */
@-ms-keyframes rainbow {
	0%{color: orange;}
	10%{color: purple;}
	20%{color: red;}
	40%{color: yellow;}
	60%{color: green;}
	100%{color: orange;}
}

/* Standar Syntax */
@keyframes rainbow{
	0%{color: orange;}
	10%{color: purple;}
	20%{color: red;}
	40%{color: yellow;}
	60%{color: green;}
	100%{color: orange;}
}
</style>

<span class="rainbow">Rainbow Text</span>
共有 X Facebook LINE QR コード

コメント 0 件

最初のコメントを書いてみましょう。