웹솔루션개발 25년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] Animated text fill 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] Animated text fill

해피CGI윤실장 2025. 2. 12. 09:26

HTML과 SCSS로 제작된 텍스트 애니메이션 입니다.
텍스트 색상이 움직이는 디자인입니다.
자세한 내용은 데모에서 확인 하실 수 있습니다.




HTML

<p>
  Spice up your type with CSS
  <span>
    Animated text fill
  </span>
  &mdash; no JavaScript required &mdash;
</p>
 


CSS

body { font: 400 1em/1.5 "Neuton"; background: #090d00; color: rgba(255,255,255,.25); text-align: center; margin: 0 }
 
p {
text-transform: uppercase;
letter-spacing: .5em;
display: inline-block;
border: 4px double rgba(255,255,255,.25);
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
top: 18%;
left: 50%;
width: 40em;
margin: 0 0 0 -20em;
  
  span {
 
   font: 700 4em/1 "Oswald", sans-serif;
   letter-spacing: 0;
   padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
   text-shadow: 0 0 80px rgba(255,255,255,.5);
 
/* Clip Background Image */
 
  -webkit-background-clip: text;
  background-clip: text;
 
/* Animate Background Image */
 
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
 
/* Activate hardware acceleration for smoother animations */
 
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
 
  }
}
 
/* Animate Background Image */
 
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
 

 

 

 

저작자표시

'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글

[해피CGI][cgimall] 맞춤형 가상동반자를 생성하고 상호 작용할 수 있는 AI 기반 플랫폼 Candy.ai  (0) 2025.02.14
[해피CGI][cgimall] 텍스트 요약, 디자인보조 등 다양한 분야에서 활용되는 AI 라이너(AI Liner)  (0) 2025.02.13
[해피CGI][cgimall] 3D Card Hover  (0) 2025.02.11
[해피CGI][cgimall] 하나금융그룹 - 환율정보조회 Open API  (0) 2025.02.10
[해피CGI][cgimall] 한국은행 경제통계 OPEN API  (0) 2025.02.07
공유하기 링크
'웹프로그램밍 자료실/기타 자료' Related Articles more
Comments