Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Text Typing Animation

Cách Tạo Text Typing Animation


Ngày 6 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo Typing Effect CSS bằng HTML CSS cho thiết kế và phát triển website nha.

Text Typing Animation

HTML

Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho Typewriter effect thông qua đoạn code sau đây nha:

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Tạo Text Typing Animation</title>
</head>
<body>
  <div class="container">
    <div class="static-text">Niềm Vui Lập Trình</div>
    <ul class="dynamic-text">
      <li><span>HTML</span></li>
      <li><span>CSS</span></li>
      <li><span>Javascript</span></li>
      <li><span>Bootstrap</span></li>
    </ul>
  </div>
</body>
</html>

CSS

Tiếp theo chúng ta sẽ sử dụng các thuộc tính CSS cơ bản và @keyframes để phát triển giao diện, hiệu ứng chuyển động cho chức năng này bằng đoạn mã sau đây nhé.

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1E90FF;
}
.container{
  display: flex;
}
.container .static-text{
  color: #fff;
  font-size: 60px;
  font-weight: 400;
}
.container .dynamic-text{
  margin-left: 15px;
  height: 90px;
  line-height: 90px;
  overflow: hidden;
}
.dynamic-text li{
  list-style: none;
  color: #FC6D6D;
  font-size: 60px;
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
.dynamic-text li span{
  position: relative;
  margin: 5px 0;
  line-height: 90px;
}
.dynamic-text li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #1E90FF;
  border-left: 2px solid #FC6D6D;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}

Và kết quả bạn xem video sau đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen Cách Tạo Typing animaion by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm về các hiệu ứng đánh chữ khác thì truy cập ở đây nha.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách để tạo hiệu ứng đánh chữ bằng CSS cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tìm Kiếm Bài Viết

Ads Digital Ocean

Nhận Ngay $100 sử dụng dịch vụ khi đăng ký tài khoản trên DigitalOcean.

Ads azdigi

Sử dụng dịch vụ hosting của Azdigi chỉ với 50.000 đồng.

Ads HostGator

Nhận Ngay Tên Miền Và Chứng Chỉ SSL Miễn Phí Khi Sử Dụng Hosting Của HostGator.

Ads Name Cheap

Đăng Ký Tên Miền Chỉ Với $0.99/năm cùng với Name Cheap.