Tạo hiệu ứng Fade-in, Fade-out trên chữ với CSS3 Animation

Chào các bạn, hôm nay mình sẽ chỉ cho các bạn cách làm một hiệu ứng fade in và fade out trên chữ với CSS3 Animation. Hiệu ứng này rất đơn giản và dễ thực hiện, chỉ với việc dùng @keyframe cho 7 kí tự với thời gian khác nhau. Qua bài viết này, chắc chắn các bạn sẽ có thêm kinh nghiệm trong việc tạo các hiệu ứng động bằng CSS3.

Xem Demo | Download

HTML

Trước hết, chúng ta cần có 7 kí tự theo định dạng html như sau :

<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>

CSS

Đầu tiên, chúng ta định dang css chung cho tất cả các kí tự như sau :

.letter {
   position: relative;
   top: -webkit-calc(50% - 60px);
   top: calc(50% - 60px);
   text-shadow: 0px 0px 3px white;
}

Và đây chính là chìa khóa của cả bài viết, chúng ta sẽ tạo các hiệu ứng động trên từng chữ như sau :

.letter:nth-child(1) {
        -webkit-animation: fade 4s infinite 200ms;
        animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
        -webkit-animation: fade 4s infinite 400ms;
        animation: fade 4s infinite 400ms;
 }
.letter:nth-child(3) {
        -webkit-animation: fade 4s infinite 600ms;
        animation: fade 4s infinite 600ms;
 }
.letter:nth-child(4) {
        -webkit-animation: fade 4s infinite 800ms;
        animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
        -webkit-animation: fade 4s infinite 1000ms;
        animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
        -webkit-animation: fade 4s infinite 1200ms;
        animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
        -webkit-animation: fade 4s infinite 1400ms;
        animation: fade 4s infinite 1400ms;
}
 
 @-webkit-keyframes fade {
        50% {
            opacity: 0.02;
        }
}
 
 @keyframes fade {
        50% {
            opacity: 0.02;
        }
}

Các bạn thấy đấy , mỗi kí tự sẽ có hiệu ứng fade cách nhau 200ms , và điều này đã tạo hiệu ứng loading cực kì đẹp mắt. Mình hy vọng qua bài viết này, các bạn sẽ có thể sáng tạo thêm hay ứng dụng ngay hiệu ứng loading này vào cho chính trang web của mình.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster