文字抖动效果
写在前面
千万别说直到永远，因为你压根不知道永远有多远 今天利物浦挺进了欧冠八强！
实现效果
实现原理
- 这个实现的方法和之前所写的文字闪烁效果方法相似
- 通过给每个字添加一定的动画延时，使得字体产生抖动的感觉 文字闪烁效果
实现代码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #636e72;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span {
position: relative;
display: inline-block;
color: snow;
font-size: 80px;
margin: 3px;
animation: shake 1s ease-in-out infinite;
}
span:nth-child(1){
animation-delay: .1s;
}
span:nth-child(2){
animation-delay: .2s;
}
span:nth-child(3){
animation-delay: .3s;
}
span:nth-child(4){
animation-delay: .4s;
}
span:nth-child(5){
animation-delay: .5s;
}
span:nth-child(6){
animation-delay: .6s;
}
@keyframes shake {
0%,100%{
transform: translateY(0px);
}
30% {
transform: translateY(-30px);
}
60% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="box">
<span>利</span>
<span>物</span>
<span>浦</span>
<span>是</span>
<span>冠</span>
<span>军</span>
<span>!</span>
</div>
</body>
</html>实现代码很简单就不做过多的解释了
