CSS text width left to right
Question
I'm trying to fade in text from left to right similar to answer found here , but want the text to be hidden behind a transparent background div instead of the example's white background. Is this possible with CSS? Reason being there will be a image behind the text that I'd like to fade in.
1 answers
solution1
2 ACCPTED 2018-02-12 00:10:32
Yes, you can simple make it by setup the width from 0 to 100% on @keyframes (as in example in your question) to show the parts of the text.
Small demo-example for you to show is how it work. Click on Zero:
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 only for test. By @keyframes you do not need them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.