<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: lightcoral;
}
div{
text-align: center;
margin: 200px auto;
}
span{
position: relative;
text-align: center;
color: white;
font-size: 42px;
animation: letter 1s cubic-bezier(0.1,0.5,0.2,1) infinite alternate;
top: 0px;
}
span:nth-child(1){
animation-delay: 0s;
}
span:nth-child(2){
animation-delay: 0.1s;
}
span:nth-child(3){
animation-delay: 0.2s;
}
span:nth-child(4){
animation-delay: 0.3s;
}
span:nth-child(5){
animation-delay: 0.4s;
}
span:nth-child(6){
animation-delay: 0.5s;
}
span:nth-child(7){
animation-delay: 0.6s;
}
span:nth-child(8){
animation-delay: 0.7s;
}
@keyframes letter{
from{
top: 0px;
text-shadow: blanchedalmond 0 0 0.05em;
}
to{
top: 30px;
text-shadow: blanchedalmond 0 1em 0.2em;
}
}
</style>
</head>
<body>
<div>
<span>欢</span>
<span>迎</span>
<span>来</span>
<span>到</span>
<span>回收旧老婆</span>
<span>的</span>
<span>博</span>
<span>客</span>
</div>
</body>
</html>
————————————————
CSS动画特效之 字节跳动
原文链接：https://blog.csdn.net/weixin_44285674/article/details/101173311