Shiny Text Effect with CSS..

 

 

   

 

텍스트 위로 광원이 지나가는 효과..

 

 

This is Shiny Text Effect with CSS ~

This is Shiny Text Effect with CSS ~

This is Shiny Text Effect with CSS ~

 

 

/* CSS */

.bg_b { width:100%; padding:20px; text-align:center; color:#a0a0a0; }
.shiny1:hover {
  /* 마우스 호버시 나타나는 색상 */
  color:#fff;

  /*속도조절 */
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,0.3) 30%, #000 50%, rgba(0,0,0,0.3) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s infinite;
}
@-webkit-keyframes shine { from { -webkit-mask-position: 150%; } to { -webkit-mask-position: -50%; } }

 

 

<!-- HTML -->

<div id="box" class="bg_b">
  <span class="shiny1">This is Shiny Text Effect with CSS ~</span>
</div>