CSS文字寬度從左到右

Question

我正在嘗試從左向右淡入文本，類似於此處找到的答案，但希望將文本隱藏在透明背景div（而不是示例的白色背景）后面。 CSS有可能嗎？ 原因是我想淡入的文字后面會有圖像。

Answer 1

是的，您可以通過在@keyframes width設置為0到100％（例如在您的問題中的示例中）以顯示文本的部分，來簡單地進行設置。

您可以通過一個小的演示示例來了解其工作原理。 單擊零：

 stripe.onclick = function() { var sec = new Date().getSeconds() % 10; stripe.classList.add('animate'); digit.classList.add('animate'); console.log(); };

  #digit { width: 20px; overflow: hidden; font: 32px "Courier New", monospace; cursor: pointer; transition: 2s linear width; } #stripe { width: 20px; transition: 2s linear width; } #stripe.animate { width: 200px; transition: 2s linear width; } #digit.animate { width: 200px; transition: 2s linear width; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Title</title> <style> </style> </head> <body> <div id="digit"><span id="stripe">0123456789</span></div> <script> </script> </body> </html>

PS

JS僅用於測試。 通過@keyframes，您不需要它們。

CSS文字寬度從左到右

問題描述

1 個解決方案

解決方案1
2 已采納 2018-02-12 00:10:32

CSS文字寬度從左到右

問題描述

1 個解決方案

解決方案1 2 已采納 2018-02-12 00:10:32

解決方案1
2 已采納 2018-02-12 00:10:32