Để tạo
hiệu ứng chữ đánh máy cho Blog, bạn thực hiện theo hướng dẫn sau :
Bước 1 - Thêm CSS
Đăng nhập Trang Quản trị Blogger »
Chủ đề »
Tùy chỉnh »
Chỉnh sửa HTML tìm đến thẻ đóng
</head> và dán đoạn
CSS sau đây vào trước nó.
<style>/* <![CDATA[ */
.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}
/* ]]> */</style>
Bước 2 - Thêm Javascript
Copy đoạn
Javascript bên dưới và
Paste vào trước thẻ
</body>.
<script>//<![CDATA[
const text = document.querySelector(".sec-text");
const textLoad = () => {
setTimeout(() => {
text.textContent = "chữ đánh máy";
}, 0);
//1s = 1000 milliseconds
}
textLoad();
setInterval(textLoad, 12000);
//]]></script>
Bước 3 - Áp dụng vào bài viết
Tại bài viết bạn chuyển sang
Chế độ HTML sau đó
copy và
dán đoạn
code HTML dưới đây vào rồi
lưu lại.
<span class="text first-text">Hiệu ứng</span>
<span class="text sec-text"> chữ đánh máy cho blog.</span>
Chúc bạn thành công!
