[英]CSS text width left to right
是的,您可以通过在@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,您不需要它们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.