文字浪动效果
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background-color: #111111;
}
.la {
color: #FFFFFF;
text-align: center;
font-size: 50px;
font-weight: bold;
position:relative;
top: 300px;
left: 0;
-webkit-box-reflect: below 10px linear-gradient(transparent, rgba(170, 0, 0, 0.2));//设计文字倒影
}
.la span {
position: relative;
display: inline-block;
color: #FFFFFF;
/* font-size: 2rem; */
text-transform: uppercase;
animation: anima 1s ease-in-out infinite;
animation-delay: calc(0.1s* var(--i) );
}
@keyframes anima{
0% {
transform: translateY(0px);
}
20% {
transform: translateY(-10px);
}
40%,100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="la">
<span style="--i:1">L</span>
<span style="--i:2">O</span>
<span style="--i:3">A</span>
<span style="--i:4">D</span>
<span style="--i:5">I</span>
<span style="--i:6">N</span>
<span style="--i:7">G</span>
<span style="--i:8">.</span>
<span style="--i:9">.</span>
<span style="--i:10">.</span>
</div>
</body>
</html>
标签：文字,translateY,效果,color,text,transform,relative,浪动,font 来源： https://www.cnblogs.com/nightwerelonger/p/14744077.html