Chào các bạn đọc giả của chothemewp.com, hôm nay chúng tôi xin phép chia sẻ đến các bạn một Cách css hiệu ứng chữ tỷ lệ đậu visa cực kỳ đẹp, chuyên nghiệp dành cho dân code nhé.
Trong bài viết này, chúng tôi sẽ phân tích một đoạn mã ngắn tiết lộ văn bản tùy chỉnh được triển khai trong WordPress, chia nhỏ cấu trúc và các thành phần chính của nó. Mã này tạo ra hiệu ứng hiển thị văn bản hấp dẫn trực quan, chủ yếu được sử dụng để hiển thị các cụm từ khóa. Hãy cùng khám phá các thành phần của nó và cách chúng đóng góp vào hoạt ảnh tổng thể.
Cách css hiệu ứng chữ tỷ lệ đậu visa cực kỳ đẹp
Cách css hiệu ứng chữ tỷ lệ đậu visa cực kỳ đẹp
Hiểu chức năng Shortcode
Mã được cung cấp xác định mã ngắn WordPress có tên text_reveal, được liên kết với hàm custom_text_reveal_shortcode(). Hàm này tạo ra HTML và CSS cần thiết cho hiệu ứng hiển thị văn bản.
add_shortcode(‘text_reveal’, ‘custom_text_reveal_shortcode’);
Tạo kiểu CSS cho văn bản tiết lộ
Kiểu CSS trong chức năng shortcode chịu trách nhiệm tạo ra sự hấp dẫn trực quan cho văn bản tiết lộ. Dưới đây là một số điểm chính:
Phông chữ và Bố cục:
h1 {
Họ phông chữ: system-ui, sans-serif;
cỡ chữ: 100px;
căn chỉnh văn bản: giữa;
}
Điều này đặt kiểu dáng cho <h1>phần tử, xác định họ phông chữ, kích thước và căn chỉnh giữa.
Hoạt hình tiết lộ văn bản:
.text-tiết lộ {
/* ... */
hiển thị: lưới;
&::sau, & > khoảng {
diện tích lưới: 1/1;
hoạt hình: var(--animation-name) var(--animation-duration) easy-in-out var(--animation-delay) chuyển tiếp
}
/* ... */
}
Lớp này .text-revealrất quan trọng để cấu trúc hoạt ảnh hiển thị văn bản. Nó sử dụng CSS Grid để định vị các phần tử và áp dụng các thuộc tính hoạt hình.
Khoảng văn bản riêng lẻ:
> khoảng {
/* ... */
&:nth-child(1) {
/* ... */
--animation-name: text-reveal-1;
}
&:nth-con(2){
/* ... */
--animation-name: text-reveal-2;
}
}
Bộ > span chọn nhắm mục tiêu các đoạn văn bản riêng lẻ trong <h1>phần tử. Mỗi nhịp có hoạt ảnh được xác định hoặc text-reveal-1hoặc text-reveal-2.
Hoạt ảnh khung hình chính:
@keyframes text-reveal-1 { /* ... */ }
@keyframes text-reveal-2 { /* ... */ }
@keyframes text-reveal-lines { /* ... */ }
Những hoạt ảnh khung hình chính này kiểm soát thời gian và hành vi của hiệu ứng hiển thị văn bản. Chúng chỉ định cách hoạt động của văn bản và dòng.
Cấu trúc HTML
Cấu trúc HTML được tạo bởi hàm shortcode rất đơn giản:
<div class="chothemewp">
<h1 class="text-reveal">
<span>TỶ LỆ ĐẬU VISA</span>
<span aria-hidden="true">TỶ LỆ ĐẬU VISA</span>
</h1>
</div>
Nó bao gồm một div vùng chứa có lớp chothemewp, kèm theo một <h1>phần tử có text-reveallớp. Phần này <h1>chứa hai nhịp, mỗi nhịp đại diện cho một phần văn bản sẽ được tiết lộ.
Phần kết luận
Tóm lại, mã ngắn WordPress tùy chỉnh này tạo ra hiệu ứng tiết lộ văn bản hấp dẫn bằng cách sử dụng kết hợp kiểu CSS và hoạt ảnh. Đó là một cách hiệu quả để thu hút sự chú ý đến các cụm từ cụ thể trên trang web, nâng cao trải nghiệm tổng thể của người dùng.
Code hoàn chỉnh
Các bạn chỉ cần bỏ vào file funtion.php của mình là xong nhé. Dùng shortcode “text_reveal” để hiển thị bất cứ đâu mà các bạn mong muốn nhé
hàm custom_text_reveal_shortcode() {
ob_start(); ?>
<phong cách>
h1 {
Họ phông chữ: system-ui, sans-serif;
cỡ chữ: 100px;
căn chỉnh văn bản: giữa;
}
.text-tiết lộ {
--thời lượng hoạt hình: 2 giây;
--độ trễ hoạt hình: 1 giây;
--1-tô màu: trong suốt;
--1 nét-màu: hồng đậm;
--Kích thước 1 nét: 1px;
--2-tô-màu: hồng nóng;
--2 nét-màu: trắng;
--Kích thước 2 nét: 1px;
--lines-color: trắng;
--lines-size: 2px;
--phần đệm văn bản: 0,5rem 1rem;
hiển thị: lưới;
&::sau, & > khoảng {
diện tích lưới: 1/1;
hoạt hình: var(--animation-name) var(--animation-duration) easy-in-out var(--animation-delay) chuyển tiếp
}
> khoảng {
đệm: var(--text-padding);
màu sắc: var(--color);
độ mờ: 0;
-webkit-mask-repeat: không lặp lại;
-webkit-mask-vị trí: trung tâm;
-webkit-mask-image: var(--mask-image);
-webkit-mask-composite: var(--mask-composite-webkit);
-webkit-mask-size: var(--mask-size);
mặt nạ lặp lại: không lặp lại;
vị trí mặt nạ: trung tâm;
hình ảnh mặt nạ: var(--mask-image);
mặt nạ-composite: var(--mask-composite);
&:nth-child(1) {
-webkit-text-Stroke: var(--1-Stroke-size) var(--1-Stroke-color);
--color: var(--1-fill-color);
--mask-image: gradient tuyến tính (đen 0 0), gradient tuyến tính (đen 0 0);
--mask-composite-webkit: đích đến;
--mask-composite: loại trừ;
--animation-name: text-reveal-1;
}
&:nth-con(2){
-webkit-text-Stroke: var(--2-Stroke-size) var(--2-Stroke-color);
--color: var(--2-fill-color);
--mask-image: gradient tuyến tính (đen 0 0);
--animation-name: text-reveal-2;
}
}
&::sau đó{
nội dung: "";
chỉ số z: 2;
đường viền: var(--lines-size) var(--lines-color);
khối biên giới: không có;
chiều rộng: 100%;
biện minh-tự: trung tâm;
độ mờ: 0;
--animation-name: dòng tiết lộ văn bản;
}
}
@keyframes văn bản-tiết lộ-1 {
0%, 100% { -webkit-mask-size: 100% 100%, 100%; kích thước mặt nạ: 100% 100%, 100%; độ mờ: 1 }
50% { -webkit-mask-size: 0% 100%, 100%; kích thước mặt nạ: 100% 100%, 100% }
}
@keyframes văn bản-tiết lộ-2 {
0%, 50% { -webkit-mask-size: 0% 100%; kích thước mặt nạ: 0% 100%; độ mờ: 1 }
100% { -webkit-mask-size: 100% 100%; kích thước mặt nạ: 100% 100%; độ mờ: 1 }
}
@keyframes dòng tiết lộ văn bản {
5%, 95% { độ mờ: 1 }
50% { chiều rộng: 0 }
}
*, *:trước, *::sau { lề: 0; phần đệm: 0; kích thước hộp: hộp viền }
.chothemewp {
hiển thị: lưới;
địa điểm-mục: trung tâm;
}
</style>
<div class="chothemewp">
<h1 class="text-reveal">
<span>TỶ LỆ ĐẬU VISA</span>
<span aria-hidden="true">TỶ LỆ ĐẬU VISA</span>
</h1>
</div>
<?php
trả về ob_get_clean();
}
add_shortcode('text_reveal', 'custom_text_reveal_shortcode');
Cảm ơn bạn đã ghé thăm chothemewp.com!
Chúng tôi xin bày tỏ lòng biết ơn sâu sắc với bạn vì đã dành thời gian để khám phá nội dung trên trang web của chúng tôi. chothemewp.com cam kết mang đến cho người đọc những thông tin hữu ích và giải pháp sáng tạo trong lĩnh vực WordPress và thiết kế web.
Sự quan tâm của bạn là nguồn động viên lớn, và chúng tôi hy vọng rằng bạn đã tìm thấy những thông tin bổ ích và đáng giá từ bài viết của chúng tôi. Nếu có bất kỳ ý kiến phản hồi hoặc câu hỏi nào, hãy chia sẻ với chúng tôi. Chúng tôi luôn sẵn lòng lắng nghe và nỗ lực để cung cấp trải nghiệm người đọc tốt nhất.
chothemewp.com mong rằng bạn sẽ tiếp tục theo dõi và hỗ trợ chúng tôi trong tương lai. Cảm ơn bạn một lần nữa và chúc bạn có những trải nghiệm tuyệt vời trên trang web của chúng tôi!
Đọc thêm bài viết:
Cách code và css thanh tiến trình cực kỳ đẹp
Css button theo hình con quay wordpress
Xem Demo:
Xem cây bút
tiết lộ văn bảnbởi Mark Boots (@MarkBoots)
TRÊNCodePen.