Build a Multiple Text Typing Animation only HTML & CSS
2 min readApr 2, 2022
Hello Readers, Welcome You Again. Today, I Will Show You how to make a Multiple Text Typing Animation only in HTML & CSS. As you can see above in the image.
In this, I have used @keyframes for Animation purposes & Typing Effects.
You May Like:
- Build a Background Color Changer On Input & Color Pickler In Html
- Button Build a Copy Text to Clipboard Button in HTML CSS & JS
- How to make a Download button With Timer In HTML
- How to make a Neumorphism Clock using Html, CSS & JS
First You need to Create two Files Name Index.html & Style.css.
Now, open Index.html and paste the following codes.
<!DOCTYPE html><!-- Created By Codingkingweb.blogspot.com --><html lang="en"><head> <meta charset="UTF-8"> <title>Multiple Text Typing Animation | Codingkingweb.blogspot.com</title> <link rel="stylesheet" href="style.css"></head><body> <div class="container"> <div class="static-txt">I'm a</div> <ul class="dynamic-txts"> <li><span>Developer</span></li> <li><span>Designer</span></li> <li><span>Blogger</span></li> <li><span>Student</span></li> </ul> </div></body></html>Finally, Open Style.css and paste the following codes.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); :root{ --bg-color: #091921; } *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-color); } .container{ display: flex; } .container .static-txt{ color: #fff; font-size: 60px; font-weight: 400; } .container .dynamic-txts{ margin-left: 15px; height: 90px; line-height: 90px; overflow: hidden; } .dynamic-txts li{ list-style: none; color: #ff105e; font-size: 60px; font-weight: 500; position: relative; top: 0; animation: slide 12s steps(4) infinite; } .dynamic-txts li span{ position: relative; margin: 5px 0; line-height: 90px; } @keyframes slide { 100%{ top: -360px; } } @keyframes typing { 40%, 60%{ left: calc(100% + 30px); } 100%{ left: 0; } } .dynamic-txts li span::after{ content: ""; position: absolute; left: 0; height: 100px; width: 100%; background: var(--bg-color); border-left: 2px solid #ff105e; animation: typing 3s steps(10) infinite; }That’s all You have successfully created a Multiple Text Typing Animation only HTML & CSS, You can Download The Files By Clicking The Download Button Which is provided below:
Originally published at https://codingkingweb.blogspot.com on April 2, 2022.
⚫ Get Source Code
Go To codingkingweb.blogspot.com and search for your content.
🔥🔥Direct Link🔥🔥: 👇🔻🔻
