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

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

페이지 정보

작성자 MintState 댓글 0건 조회 5,159회 작성일 19-03-20 11:01

본문

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

01<style>
02.rainbow {
03    /* Chrome, Safari, Opera */
04    -webkit-animation: rainbow 3s infinite; 
05 
06    /* Internet Explorer */
07    -ms-animation: rainbow 3s infinite;
08 
09    /* Standar Syntax */
10    animation: rainbow 3s infinite; 
11}
12 
13/* Chrome, Safari, Opera */
14@-webkit-keyframes rainbow {
15    0%{color: orange;}
16    10%{color: purple;}
17    20%{color: red;}
18    30%{color: CadetBlue;}
19    40%{color: yellow;}
20    50%{color: coral;}
21    60%{color: green;}
22    70%{color: cyan;}
23    80%{color: DeepPink;}
24    90%{color: DodgerBlue;}
25    100%{color: orange;}
26}
27 
28/* Internet Explorer */
29@-ms-keyframes rainbow {
30    0%{color: orange;}
31    10%{color: purple;}
32    20%{color: red;}
33    40%{color: yellow;}
34    60%{color: green;}
35    100%{color: orange;}
36}
37 
38/* Standar Syntax */
39@keyframes rainbow{
40    0%{color: orange;}
41    10%{color: purple;}
42    20%{color: red;}
43    40%{color: yellow;}
44    60%{color: green;}
45    100%{color: orange;}
46}
47</style>
48 
49<span class="rainbow">Rainbow Text</span>