Practice/Examples
Wavy Text Animation
by Dev_Mook
2020. 3. 22.
출처 : Youtube > Online Tutorials 채널
*{
margin: 0;
padding: 0;
font-family: consolas;
}
.body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.wavy{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0,0,0,0.2));
}
.wavy span{
position: relative;
display: inline-block;
color: #fff;
font-size: 2em;
text-transform: uppercase;
animation: animate 1s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate{
0%{
transform: translateY(0px);
}
2%{
transform: translateY(-20px);
}
40%, 100%{
transform: translateY(0px);
}
}
#source{
color: gray;
font-size: 13px;
margin-top: 50px;
}
