Khi trang web của tôi tải, sử dụng css, tôi muốn văn bản "widget thế giới" xuất hiện trên đầu trang như thể ai đó đang viết nó theo cách thủ công; một chữ cái tại một thời điểm sẽ xuất hiện.Làm thế nào để làm mờ trong/tiết lộ một chữ cái tại một thời điểm?
Tôi sẽ sử dụng phông chữ chữ thảo. Sẽ có một vài mili giây trễ giữa mỗi chữ xuất hiện.
Tôi nghĩ rằng để làm cho mỗi chữ cái div riêng biệt sau đó làm mờ chúng từng cái một.
Đây là đoạn trích cho nội dung bạn đang tìm kiếm.
p{
color: Pink;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}
@keyframes type{
from { width: 0; }
}<p>Hi folks, this is typing animation using CSS</p>Tôi thích điều này! đơn giản hơn rất nhiều (đối với tôi) hơn http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page – dot
Dưới đây là một ví dụ đơn giản về những gì bạn sẽ làm gì:
var text = 'Widget World';
var textElements = text.split("").map(function(c) {
return $('<span id="' + c + '">' + c + '</span>');
});
var el = $('#letters');
var delay = 50; // Tune this for different letter delays.
textElements.forEach(function(e, i) {
el.append(e);
e.hide();
setTimeout(function() {
e.fadeIn(300)
}, 100 + i * delay)
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="letters"></div>Có lẽ cách này sẽ phù hợp với bạn: chiều rộng cố định cho inline-block và hoạt ảnh để giảm hoặc tăng chiều rộng
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
animation: example 2s linear 0s infinite alternate;
}
@keyframes example {
from {
width: 0;
}
to {
width: 150px;
}
}<div>some text</div>
Bạn đang tìm kiếm một cái gì đó như thế này? http://lab.tylergaw.com/css-write-on/ –
http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web -page – Quantastical