본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

Code View/Font Effect

[Text] 마우스 오버하면 플래시를 비치는 듯한 효과 만들기 CSS3





평범한 폰트 같지만
마우스 오버하면 플래시 같은 효과를 냅니다.

#light {
  display: inline-block;
  text-shadow: #111 0 0 1px, rgba(255,255,255,0.1) 0 1px 3px;
}

#box:hover #light {
  text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
  transform: rotateY(-60deg);
  transition:         transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
}

totate와 transform을 이용하면 됩니다.
[미리보기]를 통해서 이펙트를 확인해보세요^^



See the Pen FLASH LIGHT by simurai (@simurai) on CodePen.