CSS3-按键文字跳动效果

CSS3-按键文字跳动效果

html:

<h1 class="title-3d">
<span>d</span>
<span>r</span>
<span>e</span>
<span>a</span>
<span>m</span>
</h1>

css:

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;;
}
body{
background: #ff5757;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.title-3d{
position: absolute;
top: 50%;
left: 50%;
/* 水平垂直居中 */
transform: translateX(-50%) translateY(-50%);
display: flex;
}
/* 给每个span设置宽度和高度 */
.title-3d span{
width: 80px;
height: 80px;
line-height: 80px;
color: #262626;
background-color: #fff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size:1em;
/* 文字转大写 */
text-transform:uppercase;
box-shadow: 0 0 6px #ccc,inset 0 0 3px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,0);
animation: animate 0.5s infinite;
}
@keyframes animate{
0%{
/* 第一个在最下面 */
transform: translateY(0px);
box-shadow: 0 0 6px #ccc,inset 0 0 3px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,0);
}
50%{
transform: translateY(-20px);
box-shadow: 0 0 6px #ccc,inset 0 0 3px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,0.6);
}
100%{
/* 第三个在最下面 */
transform: translateY(0px);
box-shadow: 0 0 6px #ccc,inset 0 0 3px rgba(0,0,0,.2), 0 15px 15px rgba(0,0,0,0);
}
}
/* 运动频率 */
h1 span:nth-child(1){
/* 动画延迟0.1s */
animation-delay: 0.1s;
}
h1 span:nth-child(2){
animation-delay: 0.21s;
}
h1 span:nth-child(3){
animation-delay: 0.3s;
}
h1 span:nth-child(4){
animation-delay: 0.4s;
}
h1 span:nth-child(5){
animation-delay: 0.5s;
}