Hey friends,
Do check out the tutorial for this project on my YouTube channel and do subscribe for more!
<!--Created by CodingPorium,2021. Visit https://youtube.com/c/codingporium for more tutorials like this -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Rotating Words Animation using CSS | CodingPorium</title>
</head>
<style>
/*Import Poppins Font*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: poppins;
}
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: poppins;
font-size:45px;
font-weight:500;
}
body{
background-color: #0c9496;
height:100vh;
display: grid;
place-items:center;
}
.wrapper{
box-sizing: content-box;
background-color: #fff;
height:70px;
padding: 50px 30px;
display: flex;
border-radius: 8px;
box-shadow:0 20px 25px rgba(0,0,0,0.2);
}
.word{
overflow: hidden;
}
span{
display: block;
height:100%;
padding-left:10px;
color:#0c9496;
animation: spin_word 6s infinite;
}
@keyframes spin_word{
10%{
transform: translateY(-112%);
}
25%{
transform: translateY(-100%);
}
35%{
transform:translateY(-212%);
}
50%{
transform: translateY(-200%);
}
60%{
transform: translateY(-312%);
}
75%{
transform:translateY(-300%);
}
85%{
transform: translateY(-412%);
}
100%{
transform: translateY(-400%);
}
}
</style>
<body>
<div class="wrapper">
<p>I'm a</p>
<div class="word">
<span>Human</span>
<span>Student</span>
<span>Coder</span>
<span>Editor</span>
<span>Creator</span>
</div>
</div>
</body>
<script>
</script>
</html>
Thanks!
Post a Comment