• Trang chủ
  • Tin tức
  • Giới thiệu
  • Phiếu Khảo Sát Sản Phẩm
  • Bảo Mật Thông Tin
  • Tuyển Dụng
  • Liên Hệ
  • Chính Sách Bảo Hành Của Apple
  • Liên hệ
  • Site map
RTX SALE Dell SIÊU SALE Giảm đến 7 Triệu đồng Giảm đến 7 Triệu đồng Giảm đến 7 Triệu đồng Giảm đến 7 Triệu đồng X1 Carbon Gen 12 - Giảm 5 Triệu 20.10 SIÊU GIẢM GIÁ đến 45% 10.10 SIÊU GIẢM GIÁ TẶNG CHUỘT KHÔNG DÂY LOGITECH
Tìm
  • Tất cả sản phẩm
  • INTEL NUC
  • LENOVO / IBM THINKPAD
  • HP
  • DELL
  • ASUS
  • APPLE MACBOOK
  • FUJITSU
  • MSI
  • ACER
  • LG GRAM
  • MICROSOFT
  • XIAOMI
  • GIGABYTE
  • TOSHIBA
  • COLORFUL
  • HUAWEI
  • LapTop Thanh Lý
  • Danh mục sản phẩm
    • LAPTOP
      • LENOVO / IBM THINKPAD
        • Lenovo Gaming Legion
        • Lenovo Gaming 3 - LOQ
        • Lenovo Ideapad 5 Pro
        • Lenovo Ideapad S Series
        • Lenovo IdeaPad Slim 3
        • Lenovo IdeaPad Slim 5
        • Lenovo ThinkBook
        • Thinkpad V Series
        • Thinkpad E Series
        • ThinkPad L Series
        • Thinkpad T Series
        • Thinkpad X Series
        • Thinkpad P Workstation
        • Thinkpad W Series
        • Lenovo Yoga
        • Lenovo IdeaPad 100 Series
        • Lenovo IdeaPad Slim 7
      • INTEL NUC
      • HP
        • HP Pavilion
        • HP 14s - 15s
        • HP ProBook
        • HP 240- 245- 250- 340- 348
        • HP Envy & Spectre
        • HP Gaming
        • HP Elitebook & Workstation
      • DELL
        • Dell Gaming G Series
        • Dell Alienware
        • Dell XPS
        • Dell Inspiron
        • Dell Vostro
        • Dell Latitude
        • Dell Precision
      • ASUS
        • Asus X Series
        • Asus ProArt
        • Asus Vivobook A Series
        • Asus ExpertBook Series
        • Asus Vivobook S Series
        • Asus Vivobook Flip
        • Asus Zenbook UX Series
        • Asus TUF Gaming
        • Asus ROG Gaming
      • APPLE MACBOOK
        • MacBook Air
        • Macbook Pro
      • FUJITSU
      • MSI
        • MSI Bravo | Delta | Alpha | Crosshair
        • MSI Modern Series
        • MSi Gaming GL Series
        • MSI Prestige Series
        • MSI Gaming GE Series
        • MSI Gaming GP Series
        • MSI Gaming GS | Stealth Series
        • MSI Sword | GF | Katana | Cyborg Series
        • MSI Gaming GT Series
        • MSI Creator Series
        • MSI Gaming GT80 Titan
        • MSI Mobile Workstation
      • ACER
        • Acer Aspire E Series
        • Acer Aspire F Series
        • Acer Aspire V Series
        • Acer Swift Series
        • Acer Aspire A Series
        • Acer Nitro Series
        • Acer Predator
      • LG GRAM
      • MICROSOFT
      • XIAOMI
      • GIGABYTE
      • TOSHIBA
      • LapTop Thanh Lý
      • HUAWEI
      • COLORFUL
    • MÁY TÍNH ĐỂ BÀN - DESKTOP
      • PC Acer
      • Apple Mac Mini - Chính Hãng VN
      • PC Asus
      • PC Dell
        • Dell Inspiron
        • Dell AlienWare
        • Dell Vostro
        • Dell Optilex
        • Dell XPS
        • Dell Precision
        • Dell Server
      • PC HP
        • HP Desktop
        • PC HP Pavilion
        • HP ProDesk
        • HP EliteDesk
        • HP Workstation
        • HPE Server
        • HP Flexible
      • PC Mini
      • PC Fujitsu
      • PC Lenovo
        • Lenovo Desktop
        • Lenovo IdeaCentre
        • Lenovo ThinkCentre
        • Lenovo Workstation
      • PC MSI
      • Màn Hình Desktop - LCD
    • MÁY TÍNH ALL IN ONE
      • Dell All In One
      • Apple iMac - Chính Hãng VN
      • HP All In One
        • HP ProOne
        • HP EliteOne
      • Lenovo All In One
      • Asus All In One
      • Acer All In One
    • MÀN HÌNH MÁY TÍNH - LCD
      • LCD MSI
      • LCD Acer
      • LCD AOC
      • LCD Asus
      • LCD BenQ
      • LCD Dell
      • LCD HP
      • LCD Lenovo
      • LCD Philips
      • LCD SamSung
      • LCD ViewSonic
      • LCD LG
      • LCD Dahua
      • LCD Xiaomi
      • LCD Gigabyte
      • LCD Apple
      • LCD GALAX
      • LCD E-DRA
      • LCD Hikvision
      • LCD VSP
      • LCD HKC
    • LINH KIỆN LAPTOP
      • RAM
      • SSD
        • SSD Adata
        • SSD Crucial
        • SSD Intel
        • SSD Liteon
        • SSD Sandisk
        • SSD Plextor
        • SSD Kingmax
        • SSD Patriot
        • SSD Kingston
        • SSD Samsung
        • SSD Toshiba
        • SSD Apacer
        • SSD Western
        • SSD Corsair
        • SSD Transend
        • SSD Silicon
        • SSD Micron
      • HDD - External
        • Toshiba
        • Hitachi
        • Seagate
        • Western Digital
        • Transcend
        • Silicon Power
      • Sony Keyboard
      • Speaker LapTop
      • HDD LapTop
      • Phụ Kiện HDD
      • IBM - Lenovo Keyboard
      • Battery - Pin
        • Dell Battery
        • Sony Battery
        • HP - Compaq Battery
        • IBM - Lenovo Battery
        • Toshiba Battery
        • Apple Battery
      • Toshiba Keyboard
      • Acer Keyboard
      • Adapter - Sạc Máy Tính
      • USB
    • LINH KIỆN DESKTOP
      • MainBoard
        • Socket 1150
        • Socket 1151 v2
        • Socket 1151
        • Socket 2011
        • Socket 2066
        • MB for CPU AMD
      • CPU
        • Intel Processor
        • AMD Processor
      • Card PCI
      • Ram PC
        • DDR4
        • DDR3
      • VGA
        • VGA Asus
        • VGA Gigabyte
        • VGA MSI
        • VGA Quadro
      • HDD Desktop
        • Seagate Storage
        • Western Storage
        • Toshiba Storage
      • PSU - Power Supply
        • ARROW
        • ACBEL
        • Coole Master
        • Huntkey
        • PSU Gigabyte
        • ANTEC
        • Corsair
        • Golden
        • Dragon
        • Xigmatek
        • FSP
      • UPS
      • Case - Thùng Máy PC
        • Delux
        • Patriot
        • Cooler Master
        • Case JETEK
        • Case Golden
        • Thor Erosi
        • Case Sama
        • Case Xigmatek
        • Case Corsair
        • DeepCool
        • Super Deluxe
        • Infinity
        • Aerocool
      • FAN - Tản Nhiệt PC
        • FAN CPU
        • FAN Case
    • THIẾT BỊ VĂN PHÒNG
      • Thiết Bị Live Stream | Truyền Hình Tương Tác
        • AVer Gaming
        • AVer Education
        • AVer Kết Nối TV-PC
        • Card Ghi Hình AVerMedia
        • AVerCaster Hệ Thống Chuyên Nghiệp
      • Thiết Bị Trình Chiếu
        • Máy chiếu
        • Màn Chiếu
        • Bút Trình Chiếu
      • Scanner
      • POS - Máy In Hóa Đơn
      • Thiết Bị Phòng Họp
      • Máy Tính Tiền HP Rpos
      • Máy In (Printer)
        • Brother Printer
        • Canon Printer
        • HP Printer
        • RICOH Printer
        • Epson Printer
        • OKI Printer
        • FUJI XEROX Printer
      • Mực In
        • Mực In Phun
        • Mực In HP
        • Mực In Laser
        • Mực In Canon
        • Mực Máy Fax
        • Mực In Kim
        • Mực In Brother
        • Drum
        • Mực In OKI
        • Mực In RICOH
        • Mực In SamSung
      • Máy chấm công
    • PHỤ KIỆN
      • Phụ Kiện Cho Apple
      • Gaming Gear - Thiết bị Game
        • Tay Cầm Chơi Game
        • Gaming Mouse
        • Gaming Keyboard
        • Gaming Headphone
        • Balo Gaming
        • Mouse Pad Gaming
        • Đồ Chơi Gaming
        • Ghế Gaming
        • VR - Gear Thực Tế Ảo
      • Thiết Bị Mạng
        • Wifi Display
      • HeadPhone - Tai Nghe
      • Speaker - Loa
      • Bàn Phím Rời
      • Mouse - Chuột Máy Tính
      • Túi Xách, BaLo LapTop
      • Quạt Làm Mát
      • USB Hub - Bộ Chia Cổng USB
      • Phụ Kiện Khác Cho Laptop
      • Pin Sạc Dự Phòng
      • Thẻ Nhớ
    • MÁY TÍNH BẢNG
      • Máy Tính Bảng Asus
      • Máy Tính Bảng SamSung
      • Máy Tính Bảng Acer
      • Apple iPad - Chính Hãng VN
        • iPad
        • iPad Mini 5
        • iPad Air
        • iPad Pro
      • Máy Tính Bảng Dell
      • Microsoft Surface
      • Phụ Kiện Máy Tính Bảng
      • Máy Tính Bảng Lenovo
    • CÁP - ĐẦU NỐI - DÂY NỐI
      • Cáp Tín Hiệu
        • HDMI
        • VGA
        • Display Port
        • DVI
      • Cáp, Đầu Chuyển Đổi
        • HDMI -> Khác
        • USB -> Khác
        • Mini Display Port -> Khác
        • VGA - > Khác
        • Display Port -> Khác
        • Micro USB - > Khác
        • Lightning -> Khác
        • Type-C -> Khác
        • Micro HDMI -> Khác
        • Mini HDMI -> Khác
        • Mini USB -> Khác
        • DVI -> Khác
      • Cáp Nối Dài
        • USB
        • Loa - Tai Nghe
        • HDMI
      • Cáp USB In
      • Cáp USB Link
      • Cáp Loa, Tai Nghe
      • Cáp Mạng
      • Dây Nguồn Máy Tính
      • Bộ Khuếch Đại HDMI
      • HDMI Hub và Switch
      • VGA Hub và Switch
      • Sạc Xe Hơi
      • USB HUB
      • Cáp Sata III HDD
    • CAMERA AN NINH - GIÁM SÁT
      • Đấu Ghi Hình
      • Camera
    • THIẾT BỊ MẠNG
      • Thiết bị 4G - Wifi
        • Thu Sóng Wifi
        • Phát Sóng Wifi
      • LAN HUB - Switch
      • Thiết bị mạng CISCO
        • Calalyst 1000 Series Switches
        • Calalyst 1200 Series Switches
    • VĂN PHÒNG PHẨM
      • Giấy In - Giấy Decal
      • Đồ Dùng Văn Phòng
      • Nội Thất Văn Phòng
      • Vở - Sổ - Phiếu - Note
      • Bìa Cứng / Nhựa - Kệ Tài Liệu
      • Bút - Thước - Tẩy - Bảng Viết
      • Con Dấu - Khắc Dấu - Mực
      • Nhu Yếu Phẩm - Băng Keo
      • Kéo - Hồ - Bấm Lổ - Cắt Giấy
    • ĐIỆN THOẠI DI ĐỘNG
      • BluePhone
      • Điện Thoại Di Động Asus
      • Iphone
      • Điện Thoại Di Động Lenovo
      • Phu Kiện Điện Thoại- Tablet
    • PHẦN MỀM BẢN QUYỀN
      • Window Bản Quyền
      • Office
      • Diệt Virus
    • DỊCH VỤ BẢO HÀNH MỞ RỘNG
      • Bảo Hành Mở Rộng HP
    • ĐỒNG HỒ
      • Bulova
      • Casio
      • Apple Watch
        • Apple Watch Sport
        • Apple Watch Edition
      • Danish
      • Seiko
    • DỊCH VỤ
      • Dịch Vụ
  • Bảo Hành
  • Trả Góp
  • Thẻ Thành Viên
  • Các Chi Nhánh

Cách Tạo Hiệu Ứng Đánh Máy Bằng CSS (25/10/2023)


Bạn không cần JavaScript để tạo hiệu ứng máy đánh chữ cổ điển. Hàm step() của CSS sẽ giúp bạn tạo hiệu ứng đánh máy chữ dễ dàng.

Hiệu ứng Typewriter trong CSS

Hiệu ứng đánh máy chữ là gì?

Hiệu ứng máy đánh chữ là một kỹ thuật hoạt ảnh cho văn bản, mô phỏng quá trình nội dung được hiển thị dần dần, bắt chước hành động gõ khi nó mở ra trước mắt người xem. Hiệu ứng này gợi nhớ đến máy đánh chữ kiểu cũ, thiết bị đầu cuối của máy tính đời đầu hoặc Giao diện dòng lệnh (CLI).

Sự xuất hiện dần dần của văn bản tạo thêm yếu tố hồi hộp và hấp dẫn, khuyến khích khán giả chú ý đến thông điệp đang được truyền tải.

Cách hoạt động của hàm steps() trong CSS

Hàm step() là một hàm phổ biến được sử dụng trong hoạt ảnh CSS. Nó làm cho hoạt ảnh trông giống như đang tiến triển theo các bước riêng biệt thay vì chuyển đổi mượt mà.

step() là một hàm xác định thời gian hoạt ảnh có hai tham số. Tham số đầu tiên biểu thị số bước mà bạn muốn hoạt ảnh của mình thực hiện. Tham số thứ hai xác định hành vi của từng bước. Cú pháp của hàm step() như sau:

 
animation-timing-function: steps(n, direction)

Trong khối code ở trên, hàm step() có hai tham số là: n và direction. Tham số direction có thể là start hoặc end.

Việc đặt direction sang set đảm bảo rằng bước đầu tiên được hoàn thành ngay khi hoạt ảnh bắt đầu. Trong khi đó, việc đặt direction sang end sẽ chạy bước cuối cùng khi hoạt ảnh kết thúc. Để minh họa tầm quan trọng của hàm step(), hãy xem đoạn mã HTML sau:

 
<div class="container">
  <div></div>
</div>

Khối code ở trên xác định div container với div con. Nếu bạn muốn div con lướt qua màn hình, bạn sử dụng hoạt ảnh CSS như thế này:

 
.container {
    background-color: blue;
}

div:not(.container) {
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
}

@keyframes movebox {
    100% {
        transform: translateX(100vw);
    }
}

Khối code trên dùng quy tắc @keyframes để xác định hoạt ảnh tên movebox. Hoạt ảnh này sau đó được áp dụng cho div con, khiến nó di chuyển mượt mà trên màn hình trong vòng lặp vô tận.

Lặp vô tận

Nếu không thích hoạt ảnh mượt mà và muốn đạt được hiệu ứng "bị giật", bạn có thể sử dụng hàm step() như thế này:

 
div:not(.container){
    background-color: red;
    width: 88px;
    height: 88px;
    animation: movebox 4s infinite;
    animation-timing-function: steps(10, end);
}

Như bạn có thể thấy trong ảnh GIF bên dưới, việc kết hợp hàm step() với giá trị tham số 10 sẽ tạo hoạt ảnh cho div con theo từng bước thay vì hoạt ảnh mượt mà. Số bước càng cao thì hoạt ảnh của bạn sẽ càng ít bị giật.

Trong ví dụ trên, tham số direction được cung cấp. Tuy nhiên, nếu bạn bỏ qua hướng, trình duyệt sẽ sử dụng end làm giá trị mặc định cho direction.

Kết quả của vòng lặp vô tận có hiệu ứng giật

Tạo hiệu ứng đánh máy chữ

Bây giờ bạn đã hiểu cách hoạt động của hàm step(), đã đến lúc áp dụng mọi thứ đã học vào thực tế. Tạo một thư mục mới và đặt tên thích hợp cho nó. Trong thư mục đó, thêm tệp index.htm để đánh dấu và file style.css để tạo kiểu.

Trong file index.htm, thêm code soạn sẵn sau:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur 
        adipisicing elit. Reiciendis, tempore! 
      </div>
    </div>
  </body>
</html>

Khối code ở trên xác định đánh dấu cho một trang web HTML đơn giản. Có một div container chứa một div khác với một số văn bản giả.

Tạo hiệu ứng cho văn bản

Mở file style.css và đặt chiều rộng của div container bằng chiều rộng của nội dung bên trong nó.

 
.container{
    width: fit-content;
}

Tiếp theo, bằng cách sử dụng quy tắc @keyframes, xác định hoạt ảnh kiểm soát cách nó tiến triển theo thời gian. Đặt chiều rộng thành "0%" ở mức 0%. Ở mức 100%, đặt chiều rộng thành "100%" như thế này:

 
@keyframes type-text {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

Tiếp theo, chọn phần tử có tên class text và đặt thuộc tính overflow thành hidden. Làm như vậy sẽ đảm bảo rằng văn bản vẫn bị ẩn miễn là hiệu ứng gõ chưa bắt đầu. Sau khi thực hiện điều đó, hãy đảm bảo văn bản nằm trên một dòng bằng cách đặt thuộc tính khoảng trắng thành nowrap. Cung cấp cho class text một phông chữ đơn cách và thêm đường viền dọc màu xanh lá cây ở bên phải văn bản.

Đường viền này sẽ tạo ra sự xuất hiện của một con trỏ. Đặt kích thước phông chữ thích hợp và thuộc tính hoạt ảnh thành loại văn bản. Cuối cùng, thêm hàm step() vào hàm animation-timing-function.

 
.text {
  overflow: hidden;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  border-right: solid 10px green;
  font-size: 23px;
  animation: type-text forwards 4s;
  animation-timing-function: steps(40);
}

Khi chạy code trong trình duyệt, bạn sẽ thấy:

Hiệu ứng đánh máy chữ

Nếu muốn có hiệu ứng gõ dài hơn, bạn có thể điều chỉnh thời lượng hoạt ảnh và số bước được chỉ định trong hàm step().

Làm con trỏ sống động

Hiệu ứng máy đánh chữ gần như đã hoàn thiện, tuy nhiên vẫn còn thiếu một tính năng đó là con trỏ nhấp nháy. Hãy nhớ lại ở khối mã cuối cùng, đường viền bên phải đã được đặt trên văn bản để dùng làm con trỏ. Bạn cũng có thể thêm hình động vào con trỏ này bằng quy tắc @keyframes.

 
@keyframes cursor-blink {
    0% {
        border-color: transparent;
    }

    100% {
        border-color: green;
    }
}

Sau khi xác định hoạt ảnh tùy chỉnh, hãy thêm tên hoạt ảnh vào thuộc tính hoạt ảnh trên lớp văn bản và đặt thời lượng thành 0,6 giây.

 
.text{
    /* Other style rules*/
    animation: type-text forwards 4s,
             cursor-blink .6s infinite;
}

Giờ khi chạy code, bạn sẽ thấy:

Hoàn thiện hiệu ứng đánh máy chữ bằng CSS

Thế là xong! Chúc các bạn thực hiện thành công!


 

https://quantrimang.com/hoc/cach-tao-hieu-ung-danh-may-bang-css-199094

Tin khuyến mãi khác

  • Cách Sửa Lỗi Autofill Trong Excel (25/10/2023)
  • Cách Sửa Lỗi Không Gõ Được Tiếng Việt Trên MISA (25/10/2023)
  • Cách Sửa Lỗi Không Gõ Được Tiếng Việt Trên Viber, Zalo, Messenger, Skype,... (25/10/2023)
  • Hướng dẫn cách nhận biết chuẩn SATA và chuẩn NVMe của SSD ngay trên Windows 10 (24/10/2023)
  • Chi Tiết Cách Sử Dụng Speed Test Để Kiểm Tra Tốc Độ Mạng Nhanh Chóng, Đơn Giản (03/08/2023)
  • Cách Kiểm Tra Tốc Độ Internet và Cách Tăng Tốc Wifi Hiệu Quả (03/08/2023)
  • Cách khôi phục ảnh đã xóa vĩnh viễn trên máy tính và điện thoại (21/06/2023)
  • 2 cách tạo USB cài Windows 11 đơn giản và nhanh nhất 2023 (14/06/2023)
  • Windows 11 thêm tính năng 'buộc thoát ứng dụng' (26/05/2023)
  • Những Việc Cần Lưu Ý Không Nên Làm Với Chiếc Máy Tính Của Bạn (19/05/2023)
Tin tức
  • Tin Khuyến Mãi
  • Eaz Cafe
  • Công Nghệ, Sản Phẩm Mới
  • Eaz Vlog
  • Thủ Thuật - Mẹo Vặt Công Nghệ
  • Chuyên Trang Lỗi Thường Gặp
  • Đánh Giá - Tư Vấn Tiêu Dùng
  • Thế Giới Quanh Ta
  • Bản Tin Games
HOTLINE
HCM: 028.223.55555
Hà Nội: 024.2200.5555
Đà Nẵng: 0236.656.9999
Dealer: 028.66.889.888
Trả Góp: 028.2211.2232
Phản Hồi & Góp Ý: 097.886.1368
Hỗ trợ trực tuyến

Tư Vấn Hà Nội

Phúc

Tư Vấn Đà Nẵng

Mr Quỳnh

Tư Vấn HCM

Mr Lâm
Mr Kha
Mr Phú
Phúc

Mua Trả Góp

Mr Quỳnh
Mr Lâm
Mr Kha
Quảng cáo

Thống kê truy cập
Online 516
Lượt truy cập
49505251
Hướng Dẫn Mua Hàng Giao Hàng - Chuyển Hàng Hướng Dẫn Mua Trả Góp Chính Sách và Quy Định Chung Quy Định - Chính Sách Đổi Trả Hàng, Hoàn Tiền Trả Góp 0% Bằng Thẻ Tín Dụng Quốc Tế

Công ty TNHH một thành viên Kỹ thuật - Thương mại - Dịch vụ Bảo An

Giấy Chứng nhận Đăng kí Kinh Doanh số: 0304895546 do Sở Kế Hoạch và Đầu Tư Tp HCM cấp ngày 23/3/2007

Email: BaoAnCo@gmail.com

Website: www.LaptopNo1.com - www.LaptopNo1.vn

Designed by DPS Co., LTD

Adv