html用css写彩虹,纯CSS3实现的彩虹火焰文本特效

CSS

语言：

CSSSCSS

确定

/* 0deg | Red-1 */

body {

background: #222;

text-align: center;

color: #fff;

font-size: 16px;

/* Animation - Rainbow Fire */

font-family: verdana;

}

.css-fizzy {

font-size: 4em;

font-weight: bold;

margin-top: 2em;

text-align: center;

color: #fff;

/* The animation code */

animation: css-fizzy 12s linear 0s infinite;

}

@keyframes css-fizzy {

0% {

text-shadow: 0 0 0.2em #fe0702, 0 0 0.2em #e30502, 0 -0.2em 0.4em #cb0502, 0 -0.4em 0.6em #b20501, 0 -0.6em 0.8em #980402, 0 -0.8em 1em #7f0301, 0 -1em 1.2em #660202, 0 -1.2em 1.4em #4c0201, 0 -1.4em 1.6em #330100, 0 -1.6em 1.8em #1a0001;

}

9% {

text-shadow: 0 0 0.2em #ff4103, 0.1em 0.05em 0.2em #e53a04, 0.3em -0.2em 0.4em #cc3402, -0.4em -0.4em 0.6em #b32e03, 0.3em -0.6em 0.8em #992702, 0 -0.8em 1em #802103, 0 -1em 1.2em #661a02, 0 -1.2em 1.4em #4d1401, 0 -1.4em 1.6em #330d02, 0 -1.6em 1.8em #1a0700;

}

18% {

text-shadow: 0 0 0.2em #fe8005, -0.1em -0.05em 0.2em #e67404, -0.3em -0.2em 0.4em #ce6806, 0.4em -0.4em 0.6em #b35b04, -0.3em -0.6em 0.8em #994c04, 0 -0.8em 1em #804003, 0 -1em 1.2em #663403, 0 -1.2em 1.4em #4d2702, 0 -1.4em 1.6em #341a01, 0 -1.6em 1.8em #1b0d02;

}

27% {

text-shadow: 0 0 0.2em #ffbf08, 0.1em 0.05em 0.2em #e5ac07, 0.3em -0.2em 0.4em #cc9806, -0.4em -0.4em 0.6em #b38607, 0.3em -0.6em 0.8em #9a7407, 0 -0.8em 1em #815f05, 0 -1em 1.2em #674d03, 0 -1.2em 1.4em #4d3a02, 0 -1.4em 1.6em #332603, 0 -1.6em 1.8em #1a1301;

}

36% {

text-shadow: 0 0 0.2em #ffff07, -0.1em -0.05em 0.2em #e5e606, -0.3em -0.2em 0.4em #cbcc06, 0.4em -0.4em 0.6em #b3b305, -0.3em -0.6em 0.8em #999905, 0 -0.8em 1em #808004, 0 -1em 1.2em #666602, 0 -1.2em 1.4em #4d4d03, 0 -1.4em 1.6em #333301, 0 -1.6em 1.8em #1a1a02;

}

45% {

text-shadow: 0 0 0.2em #80ff0f, 0.1em 0.05em 0.2em #73e40c, 0.3em -0.2em 0.4em #67cd0a, -0.4em -0.4em 0.6em #5bb309, 0.3em -0.6em 0.8em #4e9908, 0 -0.8em 1em #408006, 0 -1em 1.2em #346605, 0 -1.2em 1.4em #274d04, 0 -1.4em 1.6em #193303, 0 -1.6em 1.8em #0d1901;

}

54% {

text-shadow: 0 0 0.2em #04ff0f, -0.1em -0.05em 0.2em #04e50d, -0.3em -0.2em 0.4em #03cc0a, 0 -0.4em 0.6em #03b30a, -0.3em -0.6em 0.8em #059809, 0 -0.8em 1em #038008, 0 -1em 1.2em #026606, 0 -1.2em 1.4em #014d03, 0 -1.4em 1.6em #023403, 0 -1.6em 1.8em #011b02;

}

63% {

text-shadow: 0 0 0.2em #01faff, 0.1em 0.05em 0.2em #00e1e5, 0.3em -0.2em 0.4em #01c8cd, 0.4em -0.4em 0.6em #00afb2, 0.3em -0.6em 0.8em #01969a, 0 -0.8em 1em #007d7f, 0 -1em 1.2em #006466, 0 -1.2em 1.4em #004b4e, 0 -1.4em 1.6em #003233, 0 -1.6em 1.8em #001a1b;

}

72% {

text-shadow: 0 0 0.2em #0000fe, -0.1em -0.05em 0.2em #0001e5, -0.3em -0.2em 0.4em #0001cd, 0.4em -0.4em 0.6em #0001b3, -0.3em -0.6em 0.8em #000199, 0 -0.8em 1em #000180, 0 -1em 1.2em #010066, 0 -1.2em 1.4em #01004e, 0 -1.4em 1.6em #000034, 0 -1.6em 1.8em #00001a;

}

81% {

text-shadow: 0 0 0.2em #7d04ff, 0.1em 0.05em 0.2em #7004e5, 0.3em -0.2em 0.4em #6403cc, 0.4em -0.4em 0.6em #5804b2, 0.3em -0.6em 0.8em #4c039a, 0 -0.8em 1em #3f0281, 0 -1em 1.2em #320266, 0 -1.2em 1.4em #26014e, 0 -1.4em 1.6em #190133, 0 -1.6em 1.8em #0d001a;

}

90% {

text-shadow: 0 0 0.2em #fe05ff, -0.1em -0.05em 0.2em #e204e5, -0.3em -0.2em 0.4em #ca04cd, -0.4em -0.4em 0.6em #b204b3, -0.3em -0.6em 0.8em #98049a, 0 -0.8em 1em #7f0280, 0 -1em 1.2em #660265, 0 -1.2em 1.4em #4c024d, 0 -1.4em 1.6em #330134, 0 -1.6em 1.8em #1a0019;

}

100% {

text-shadow: 0 0 0.2em #fe0980, 0.1em 0.05em 0.2em #e50973, 0.3em -0.2em 0.4em #cb0866, 0.4em -0.4em 0.6em #b2065a, 0.3em -0.6em 0.8em #98064d, 0 -0.8em 1em #7f0540, 0 -1em 1.2em #660433, 0 -1.2em 1.4em #4d0326, 0 -1.4em 1.6em #33011a, 0 -1.6em 1.8em #1b010e;

}

}