Skip to content

Instantly share code, notes, and snippets.

@comdotlinux

comdotlinux/index.html

Created March 13, 2021 16:09
Show Gist options
  • Save comdotlinux/2c46660cdd63efe9e73b6b5c2b8a0101 to your computer and use it in GitHub Desktop.
Save comdotlinux/2c46660cdd63efe9e73b6b5c2b8a0101 to your computer and use it in GitHub Desktop.
Download ZIP
Typing Effect Using Only CSS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Typing Effect</title>
</head>
<!--https://codewithbishal.com/example/how-to-create-animated-typing-effect-using-css-->
<body>
<ul class="dynamic-text">
<li><span>Front End Dev</span></li>
<li><span>Back End Dev</span></li>
<li><span>Full Stack Dev</span></li>
<li><span>Freelancer</span></li>
</ul>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.dynamic-text{
height: 90px;
overflow: hidden;
}
.dynamic-text li{
list-style: none;
color: #105be7;
font-size: 60px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(4) infinite;
}
@keyframes slide {
100%{
top: -360px;
}
}
.dynamic-text li span{
position: relative;
margin: 5px 0;
line-height: 90px;
}
.dynamic-text li span::after{
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #fff;
border-left: 2px solid #1475f3;
animation: typing 3s steps(10) infinite;
}
@keyframes typing {
40%, 50%{
left: 100%;
}
100%{
left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment