<p>출처1 :&nbsp;<a href="https://codepen.io/beben-koben/pen/gfuvc">https://codepen.io/beben-koben/pen/gfuvc</a></p>
<p><br></p>

<script async="" src="//jsfiddle.net/knw1234/br036sek/embed/"></script>

<p><br></p>
<p><br></p>
<p><br></p><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #808080;">&lt;!</span><span style="color: #569cd6;">DOCTYPE</span>&nbsp;<span style="color: #9cdcfe;">html</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">html</span>&nbsp;<span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span>&nbsp;<span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/1999/xhtml"</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">head</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">meta</span>&nbsp;<span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span>&nbsp;<span style="color: #808080;">/&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">title</span><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">title</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">/*This&nbsp;is&nbsp;coded&nbsp;CSS&nbsp;rainbow*/</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #d7ba7d;">a:hover</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">-webkit-animation</span>:&nbsp;rainbow&nbsp;<span style="color: #b5cea8;">1s</span>&nbsp;<span style="color: #ce9178;">infinite</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">-ms-animation</span>:&nbsp;rainbow&nbsp;<span style="color: #b5cea8;">1s</span>&nbsp;<span style="color: #ce9178;">infinite</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">-o-animation</span>:&nbsp;rainbow&nbsp;<span style="color: #b5cea8;">1s</span>&nbsp;<span style="color: #ce9178;">infinite</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">animation</span>:&nbsp;rainbow&nbsp;<span style="color: #b5cea8;">1s</span>&nbsp;<span style="color: #ce9178;">infinite</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">@-webkit-keyframes</span>&nbsp;<span style="color: #9cdcfe;">rainbow</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff8000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ffff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#80ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff80</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ffff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0080ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;90%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#8000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0080</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">@-ms-keyframes</span>&nbsp;<span style="color: #9cdcfe;">rainbow</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff8000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ffff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#80ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff80</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ffff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0080ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;90%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#8000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0080</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">@-o-keyframes</span>&nbsp;<span style="color: #9cdcfe;">rainbow</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff8000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ffff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#80ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff80</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ffff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0080ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;90%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#8000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0080</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">@keyframes</span>&nbsp;<span style="color: #9cdcfe;">rainbow</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff8000</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ffff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#80ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff00</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ff80</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;60%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#00ffff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;70%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0080ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;80%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#0000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;90%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#8000ff</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100%&nbsp;{<span style="color: #9cdcfe;">color</span>:&nbsp;<span style="color: #ce9178;">#ff0080</span>;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #808080;">/</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">head</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">body</span><span style="color: #808080;">&gt;</span></div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">h2</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"rainbow"</span><span style="color: #808080;">&gt;</span>This&nbsp;is&nbsp;Rainbow&nbsp;using&nbsp;only&nbsp;CSS3<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">h2</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">a</span>&nbsp;<span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"http://www.google.com"</span>&nbsp;<span style="color: #9cdcfe;">target</span>=<span style="color: #ce9178;">"_blank"</span><span style="color: #808080;">&gt;</span>go&nbsp;to&nbsp;google<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">a</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">body</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">html</span><span style="color: #808080;">&gt;</span></div></div><p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>
<p><br></p>


링크에 마우스를 가져가면 레인보우모양으로! Rainbow effect on a tag link