CSS Shake text – Hiệu ứng Rung Lắc cho văn bản

Trong bài viết này, chúng ta sẽ tạo hiệu ứng rung cho văn bản và hình ảnh bằng CSS Shake Text. Ở phần đầu tiên, chúng ta sẽ tìm hiểu về CSS. Sau đó, chúng ta sẽ học cách tạo hiệu ứng này thông qua các ví dụ.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS Shake text là gì

CSS được viết tắt từ cascading style sheet. Trong đó, cascading có nghĩa là thứ tự mà các kiểu được áp dụng trên một trang web. Nó giúp các nhà thiết kế website có nhiều kiểm soát hơn về bố cục của một trang HTML bằng cách áp dụng kiểu cho các thành phần khác nhau của một trang web như danh sách, biên giới, vv. Đây là một cách mạnh mẽ để kiểm soát bố cục của một tài liệu web bằng cách thêm kiểu vào đó. Nó tách nội dung của tài liệu khỏi bản trình bày của tài liệu đó, cải thiện tính truy cập của nội dung và cung cấp nhiều tính linh hoạt hơn.

Hiệu ứng shake text và hình ảnh là một hiệu ứng rất cool được sử dụng trong các trang web khác nhau, hiệu ứng này có thể dễ dàng được tạo ra bằng HTML và CSS cơ bản. Hãy xem một số ví dụ về shake text và hình ảnh với sự giúp đỡ của CSS.

CSS Shake text là một hiệu ứng cho phép văn bản hoặc hình ảnh rung lên, rất phổ biến đối với các trang web hiện đại. Bạn có thể sử dụng CSS để tạo hiệu ứng này trên một trang web của mình. Những hiệu ứng này khá đơn giản và dễ áp dụng chỉ với vài dòng mã CSS.

Hướng dẫn CSS Shake text

Chúng ta có thể tạo hiệu ứng CSS Shake Text bằng cách sử dụng thuộc tính animation của CSS. Dưới đây là một ví dụ về cách tạo hiệu ứng shake text:

@keyframes shake {
    0% { transform: translate(2px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.shake {
    animation: shake 0.8s;
}

Trong ví dụ trên, chúng ta đã tạo ra một hiệu ứng shake cho văn bản bằng cách sử dụng đoạn mã CSS. Chúng ta sử dụng thuộc tính keyframes để định n hữu 12 frame cho animation shake, mỗi frame cách nhau 10% thời gian của animation. Khi chúng ta áp dụng class “shake” vào văn bản, nó sẽ rung lên và xuống theo đường đi của các frame trong keyframes.

Để tạo hiệu ứng shake cho hình ảnh, bạn có thể sử dụng CSS chuyển động (transition) hoặc CSS animation tương tự như trên. Các thuộc tính transform và translate cũng được sử dụng để tạo ra hiệu ứng này.

Ví dụ sử dụng CSS Shake text

Để tạo hiệu ứng shake text trong CSS, bạn có thể sử dụng thuộc tính animation để tạo một animation với các khung hình chính chuyển động văn bản theo các hướng khác nhau.

Ví dụ: sau đây là một ví dụ về cách sử dụng CSS để tạo hiệu ứng shake text:

<div style="color: red;">
  This is a text that will shake.
</div>

<style>
  div {
    animation: shake 2s ease-in-out infinite;
  }

  @keyframes shake {
    0% {
      transform: translate(0, 0);
    }
    10% {
      transform: translate(-10px, 0);
    }
    20% {
      transform: translate(10px, 0);
    }
    30% {
      transform: translate(-10px, 0);
    }
    40% {
      transform: translate(10px, 0);
    }
    50% {
      transform: translate(0, 0);
    }
    60% {
      transform: translate(-10px, 0);
    }
    70% {
      transform: translate(10px, 0);
    }
    80% {
      transform: translate(-10px, 0);
    }
    90% {
      transform: translate(10px, 0);
    }
    100% {
      transform: translate(0, 0);
    }
  }
</style>

Trong ví dụ này, văn bản được di chuyển sang trái 10px, sau đó sang phải 10px, sau đó lặp lại quy trình. Quá trình này sẽ được lặp đi lặp lại mãi mãi, vì thuộc tính infinite được đặt thành true.

Bạn có thể điều chỉnh các giá trị trong animation để tạo các hiệu ứng shake khác nhau. Ví dụ: bạn có thể thay đổi độ lớn của chuyển động bằng cách thay đổi các giá trị của translate(). Bạn cũng có thể thay đổi thời gian của animation bằng cách thay đổi giá trị của duration.

CSS shake text là một cách thú vị để thu hút sự chú ý đến văn bản của bạn. Nó có thể được sử dụng để tạo hiệu ứng nhấn mạnh hoặc để tạo sự hài hước.

Ưu và nhược điểm CSS Shake text

Ưu điểm của CSS Shake text là nó giúp website của bạn trông sống động hơn, thu hút sự chú ý của người dùng. Ngoài ra, việc tạo hiệu ứng shake text là khá đơn giản và dễ dàng thực hiện với CSS.

Nhược điểm của CSS Shake text là nó có thể làm gián đoạn người dùng khi đọc văn bản. Hiệu ứng này cũng có thể làm giảm tính chuyên nghiệp của trang web nếu không được sử dụng đúng cách.

Lời khuyên CSS Shake text

Nếu bạn muốn sử dụng hiệu ứng shake text trên trang web của mình, hãy đảm bảo rằng nó được sử dụng một cách hợp lý và không gây gián đoạn cho người dùng. Nếu bạn đang thiết kế một trang web chuyên nghiệp, hãy cân nhắc việc sử dụng hiệu ứng này.