<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
background-color: #E48E60;
width: 90%；
}
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>J</span>
<span>S</span>
<span>的</span>
<span>文</span>
<span>字</span>
<span>跳</span>
<span>动</span>
</div>
</body>
</html>
扫一扫
1596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
