CSS中有很多用于文字出現(xiàn)特效的方法,以下列舉了幾個(gè)常見(jiàn)的。
// 逐字顯示 /* HTML結(jié)構(gòu) */ <p>Hello World</p> /* CSS */ p { overflow: hidden; } p::after { content: attr(data-text); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s linear; } p.start::after { opacity: 1; } // 光標(biāo)閃爍效果 /* HTML結(jié)構(gòu) */ <input type="text" value="Input Here"> /* CSS */ input[type="text"] { caret-color: #f00; animation: 1s blink step-end infinite; } @keyframes blink { from, to { caret-color: #f00; } 50% { caret-color: transparent; } } // 模擬打字效果 /* HTML結(jié)構(gòu) */ <p></p> /* CSS */ p.writing::after { content: "Hello World!"; white-space: pre; overflow: hidden; animation: 5s typing steps(10,end) forwards; } @keyframes typing { from, to { width: 0; } 50% { width: 100%; } }
以上三種方法都可以用于增強(qiáng)頁(yè)面的交互性和視覺(jué)效果,可以根據(jù)需要選擇適合的方法進(jìn)行使用。