Chia sẻ CSS Text Animation Đẹp

views

A+A-

PrintEmail

Bài viết này muốn chia sẻ đến các bạn một CSS Typography đẹp cho Text. Hi vọng kiểu chữ và hiệu ứng dưới đây sẽ giúp website bạn trở nên sinh động và bắt mắt hơn nhé

CSS đẹp cho text

Spice up your type with CSSAnimated text fill — no JavaScript required —

XEM DEMO

Hướng dẫn

Bước 1: Thêm HTML
Mẹo: Bấm nút để copy code

<div id="vidu1">
    <div>
        Spice up your type with CSS
        <span>
            Animated text fill
        </span>
        — no JavaScript required —
    </div>
</div>

Bước 2: Thêm CSS dưới đây
Mẹo: Bấm nút để copy code

#vidu1{
  font: 400 1em/1.5 "Neuton";
  background: #090d00;
  color: rgba(255, 255, 255, 0.25);
  text-align: center;
  margin: 0;
}
#vidu1 div  {
  text-transform: uppercase;
  letter-spacing: 0.5em;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
  padding: 1.5em 0em;
  width: 40em; margin: 0 0 0 -20em;
}
#vidu1 div span {
  font: 700 4em/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: 0.25em 0 0.325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
  -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%;
  }
}

Kiểu chữ trên sử dụng background bằng hình ảnh dưới đây.

Và sử dụng keyframes có tên là aitf để tạo hiệu ứng chuyển động cho màu nền của chữ

Chuyên Mục : Chia sẻ CSS CSS Typography Hướng dẫn Thiết kế website