[Code Css nâng cao] Hiệu ứng chữ tráng gương wordpress

Các bạn chỉ cần bỏ code này vào chỗ cần là xong thôi. Đơn giản quá mà hihi. [Code Css nâng cao] Hiệu ứng chữ tráng gương wordpress , hãy cùng Chothemewp xem qua nhé

Cách [Code Css nâng cao] Hiệu ứng chữ tráng gương wordpress

<p class="animated-text">
  Spice up your type with CSS
  <span>
    Animated text fill
  </span>
  &mdash; no JavaScript required &mdash;
</p>
<style>
.animated-text {
  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;
}

.animated-text 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 */
  background: url(https://i.ibb.co/RDTnNrT/animated-text-fill.png) repeat-y;
  -webkit-background-clip: text;
  background-clip: text;

  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 118s linear infinite; /* Adjusted duration for quicker demonstration */

  /* 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%;
  }
}
<\style>

Phần HTML bao gồm <p>phần tử đoạn văn ( ) với lớp “văn bản động”. Bên trong đoạn văn, có một số nội dung văn bản và một <span>phần tử bao bọc văn bản “Nô văn bản động”. Ngoài ra, còn có một thực thể HTML —được sử dụng để thể hiện ký tự dấu gạch ngang.

Phần CSS xác định kiểu cho hiệu ứng văn bản động.

Đối với .animated-textlớp:

text-transform: uppercase;: Chuyển văn bản thành chữ hoa.
letter-spacing: .5em;: Thêm khoảng trắng giữa các chữ cái.
display: inline-block;: Cho phép phần tử có chiều rộng và chiều cao khi ở trong dòng.
border: 4px double rgba(255, 255, 255, .25);: Tạo đường viền đôi xung quanh văn bản với màu trắng bán trong suốt.
border-width: 4px 0;: Đặt chiều rộng đường viền trên và dưới thành 4px và viền trái và phải thành 0.
padding: 1.5em 0em;: Thêm khoảng đệm vào đầu và cuối văn bản.
position: absolute;: Định vị tuyệt đối phần tử văn bản.
top: 18%; left: 50%;: Định vị phần tử 18% tính từ trên xuống và căn giữa theo chiều ngang.
width: 40em;: Đặt chiều rộng của phần tử thành 40em.
margin: 0 0 0 -20em;: Điều chỉnh lề để căn giữa phần tử theo chiều ngang bằng cách di chuyển phần tử sang trái một nửa chiều rộng của phần tử.

Đối với .animated-text spanlớp:

font: 700 4em/1 "Oswald", sans-serif;: Đặt kích thước phông chữ, độ dày, chiều cao dòng và họ phông chữ cho văn bản trong khoảng.
letter-spacing: 0;: Đặt lại khoảng cách chữ cho văn bản trong khoảng.
padding: .25em 0 .325em;: Thêm phần đệm vào phần trên và phần dưới của nhịp.
display: block;: Thay đổi khoảng thành phần tử cấp khối.
margin: 0 auto;: Căn giữa nhịp theo chiều ngang trong phần tử cha của nó.
text-shadow: 0 0 80px rgba(255, 255, 255, .5);: Thêm hiệu ứng đổ bóng cho văn bản.

Phần bên trong .animated-text spanđề cập đến hiệu ứng điền văn bản động:

background: Đặt hình nền cho hiệu ứng tô văn bản.
background-clip: Cắt hình nền vào văn bản.
color: transparent;: Làm cho văn bản trở nên trong suốt.
-webkit-animation: Bắt đầu hoạt ảnh có tên “aitf” (tô văn bản động) trong hơn 118 giây (được điều chỉnh cho mục đích minh họa).

Quy @-webkit-keyframes aitftắc xác định hành vi hoạt ảnh:

Tại 0%, hình nền bắt đầu từ vị trí giữa bên trái.
Tại 100%, hình nền di chuyển đến vị trí chính giữa bên phải, tạo hiệu ứng tô màu động xuyên suốt văn bản.

Mã này về cơ bản kết hợp các thuộc tính và tính năng CSS khác nhau để tạo hiệu ứng điền văn bản hoạt hình bắt mắt.