Hiệu ứng phát sáng css

Bạn có thấy các xu hướng mới nổi là hiệu ứng CSS Glitch không? Sử dụng CSS để làm hình ảnh nổi bật hơn như thế này:

Vậy thì cách làm hiệu ứng CSS Glitch như thế nào? Hãy cùng theo dõi bài viết này nhé!

Bước 1: Chuẩn bị HTML và CSS để làm hiệu ứng Glitch

Đầu tiên chúng ta sẽ tạo một phần tử đơn giản a với một class .glitch

<a href="#" class="glitch">NIIT</a>

Bạn có thể đặt bất cứ nội dung gì, nhưng mình sử dụng NIIT.

Chúng ta sẽ tạo kiểu cho nó và căn giữa trang.

.glitch {
    font-size: 130px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-decoration: none;
    color: #fff;
}

Sau đó, chúng ta sẽ tạo hai phần tử pesudo là :before và :after.

.glitch {
    /* previous code */
    &:before, &:after {
        display: block;
        content: 'NIIT';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: .8;
    } &:after {
        color: #f0f;
        z-index: -2;
    } &:before {
        color: #0ff;
        z-index: -1;
    }
}

Các phần tử :before và :after đơn giản là các bản sao của phần tử chính. Trong ví dụ của chúng ta, đó là “NIIT”.

Hai yếu tố này được định vị ngay phía sau phần tử chính.

Để tạo ra một hiệu ứng CSS Glitch, màu của các phần tử này cần là màu bão hòa của màu xanh lam (#0ff) và màu tím (#f0f).

Bước 2: Tạo hiệu ứng Glitch bằng Animation trong CSS3 khi Hover

Bây giờ, cả 3 phần tử đang nằm chồng lên nhau, chúng ta sẽ thêm Animation để chúng di chuyển tạo ra hiệu ứng nhấp nháy.

@keyframes glitch {
    0% {
        transform: translate(0)
    }
    20% {
        transform: translate(-5px, 5px)
    }
    40% {
        transform: translate(-5px, -5px)
    }
    60% {
        transform: translate(5px, 5px)
    }
    80% {
        transform: translate(5px, -5px)
    }
    to {
        transform: translate(0)
    }
}

Ở đây chúng ta đang tạo 6 keyframes chính và di chuyển phần tử bằng cách sử dụng thuộc tính tranform: translate

Nó bắt đầu và kết thúc tại translate(0), có nghĩa là các phần tử sẽ luôn kết thúc ở vị trí CSS ban đầu.

Bây giờ chúng tôi sẽ kích hoạt animation khi hover.

.glitch {
    /* previous code */
    &:hover {
        &:before {
            animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite
        }
        &:after {
            animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite
        }
    }
}

Giải thích về hiệu ứng CSS3 Animation

Chúng ta đang sử dụng kiểu CSS shorthand để viết CSS3 animation trên một dòng.

• Có thể bạn muốn biết: CSS Shorthand là gì?

animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both infinite

CSS Shorthand này là viết tắt của 5 thuộc tính CSS3:

• animation-name: Khai báo tên của @keyframes theo quy tắc để thao tác.
• animation-duration: Khoảng thời gian cần thiết để animation hoàn thành một chu kỳ.
• animation-timing-function: Thiết lập các đường cong gia tốc đặt trước như ease hoặc linear.
• animation-fill-mode: Thiết lập các giá trị nào được áp dụng trước / sau animation.
  Ví dụ: Bạn có thể đặt trạng thái cuối của animation ở lại trên màn hình hoặc bạn có thể đặt trạng thái đó để chuyển về trước khi hình động bắt đầu.
• animation-iteration-count: Số lần animation nên được thực hiện.

Một số thuộc tính khác có thể bạn muốn biết:

• animation-delay: Thời gian giữa lúc phần tử được tải và bắt đầu chuỗi animation.
• animation-direction: Đặt hướng của animation sau chu kỳ. Nó thiết lập lại mặc định trên mỗi chu kỳ.
• animation-play-state: tạm dừng / phát hình động.

Cả 2 phần tử pesudo sẽ sử dụng như nhau:

animation (glitch), duration (.3s), easing (cubic-bezier), fill-mode (both), 

.glitch {
    font-size: 130px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    text-decoration: none;
    color: #fff;
}

Để làm cho hiệu ứng ngẫu nhiên hơn, chúng ta đang đặt hướng
animation-direction cho phần tử :after thành reverse

Điều này sẽ làm cho nó đi theo hướng ngược lại so với phần tử :before.

See the Pen Hiệu ứng CSS Glitch by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Để xem chính xác các phần tử đang di chuyển như thế nào, hãy xem phiên bản animation chậm bên dưới này.

See the Pen Hiệu ứng CSS Glitch chậm by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Thêm biến thể màu sắc và kích thước khác nhau

Bây giờ, hãy tạo nhiều biến thể bằng cách thay đổi kích thước, màu sắc và thời lượng animation (animation-duration)

Trên các phần tử nhỏ hơn, bạn chỉ cần di chuyển các phần tử pesudo 1 hoặc 2 pixel.

See the Pen CSS3 Glitch Animation by NIIT -ICT Hà Nội (@niiticthanoi) on CodePen.

Bạn cũng có thể tăng giảm số lượng keyframe để đạt được kết quả khác nhau.

Hãy nhớ rằng, CSS là phải thử nghiệm và sáng tạo. Nếu thấy ổn thì là OK.

Tổng kết

Hiệu ứng CSS Glitch có thể mang lại một số phong cách rất độc đáo cho trang web của bạn, nhưng cũng có thể gây mất tập trung nếu bạn lạm dụng nó.

Bạn nghĩ gì về việc sử dụng hiệu ứng Glitch này? Hay bạn đã thấy bất kỳ trang web nào khác sử dụng nó chưa?