英文单词跳动效果,时间差
<div class="imFixed-button">
<a href="javascript:void(0);" class="im-close"><i class="iconfont icon-x"></i></a>
<div class="download-bar">
<div class="im-robot">
<div class="im-eye">
<div class="eye-top"></div>
<div class="eye-bottom"></div>
</div>
</div>
<a href="" class="dl-cont">
<div class="dl-letters">
<span class="letter">B</span><span class="letter">e</span><span class="letter">t</span><span class="letter">t</span><span class="letter">e</span><span class="letter">r</span>
<span class="letter">E</span><span class="letter">x</span><span class="letter">p</span><span class="letter">e</span><span class="letter">r</span><span class="letter">i</span><span class="letter">e</span><span class="letter">n</span><span class="letter">c</span><span class="letter">e</span><span class="letter">!</span>
</div>
</a>
</div>
</div>
.dl-cont .letter{
letter-spacing: 0;
display: inline-block;
transform: translate3d(0, 0, 0);
color: #272570;
animation: letter 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
}
@keyframes letter {
0% {
transform: translate3d(0, 2px, 0);
text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
}
100% {
transform: translate3d(0, -2px, 0);
text-shadow: rgba(255, 255, 255, 0.4) 0 8px 0.35em;
}
}
.im-robot{
position: absolute;
bottom: -9px;
left: -12px;
background: url(../images/download-logo@2x.png) no-repeat;
background-size: contain;
width: 70px;
height: 70px;
}
.im-eye{
position: absolute;
left: 50%;
top: 32px;
margin-left: -16px;
background: url(../images/eye-dl.png) no-repeat center;
width: 28px;
height: 11px;
background-size: contain;
}
.im-eye .eye-top{
position: absolute;
width: 28px;
height: 4px;
background: url(../images/eye-dl-top.png) no-repeat center;
background-size: contain;
top: 0;
left: 0;
animation: eye .6s linear infinite alternate;
}
.im-eye .eye-bottom{
position: absolute;
width: 28px;
height: 2px;
background: url(../images/eye-dl-bottom.png) no-repeat center;
background-size: contain;
bottom: 0;
left: 0;
animation: eye .6s linear infinite alternate;
}
.letter:nth-child(1) {
animation-delay: 0s;
}
.letter:nth-child(2) {
animation-delay: 0.08s;
}
.letter:nth-child(3) {
animation-delay: 0.16s;
}
.letter:nth-child(4) {
animation-delay: 0.25s;
}
.letter:nth-child(5) {
animation-delay: 0.33s;
}
.letter:nth-child(6) {
animation-delay: 0.41s;
}
.letter:nth-child(7) {
animation-delay: 0.49s;
}
.letter:nth-child(8) {
animation-delay: 0.57s;
}
.letter:nth-child(9) {
animation-delay: 0.65s;
}
.letter:nth-child(10) {
animation-delay: 0.73s;
}
.letter:nth-child(11) {
animation-delay: 0.81s;
}
.letter:nth-child(12) {
animation-delay: .9s;
}
.letter:nth-child(13) {
animation-delay: .98s;
}
.letter:nth-child(14) {
animation-delay: 1.07s;
}
.letter:nth-child(15) {
animation-delay: 1.15s;
}
.letter:nth-child(16) {
animation-delay: 1.23s;
}
.letter:nth-child(17) {
animation-delay: 1.31s;
}
.letter:nth-child(18) {
animation-delay: 1.39s;
}
.letter:nth-child(18) {
animation-delay: 1.47s;
}
.letter:nth-child(20) {
animation-delay: 1.55s;
}
.letter:nth-child(21) {
animation-delay: 1.63s;
}