从右到左文字动画效果

来源：互联网发布：音乐调音软件编辑：程序博客网时间：2024/05/15 00:05

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<title>从右到左文字动画效果</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
background: black;
font: normal 14px/1.5 "Arial","Lucida Grande",Verdana,"Microsoft YaHei","hei";
}

.font-move {
height: 77px;
overflow: hidden;
background: white;
width: 200px;
margin: 50px auto;
}
.font-move .move-box-layer {
-webkit-animation: font-move 18s cubic-bezier(1, 0, 0.29, 0.73) infinite both;
position: relative;
}
.font-move span {
height: 77px;
width: 100%;
position: absolute;
line-height: 77px;
font-size: 18px;
text-align: center;
}
.font-move span:nth-of-type(1) {
left: 0%;
}
.font-move span:nth-of-type(2) {
left: 100%;
}
.font-move span:nth-of-type(3) {
left: 200%;
}
.font-move span:nth-of-type(4) {
left: 300%;
}
.font-move span:nth-of-type(5) {
left: 400%;
}
.font-move span:nth-of-type(6) {
left: 500%;
}

@-webkit-keyframes font-move {
0%,12% {
left: 0%;
}
17%,29% {
left: -100%;
}
34%,46% {
left: -200%;
}
51%,63% {
left: -300%;
}
68%,80% {
left: -400%;
}
85%,95% {
left: -500%;
}
100% {
left: -600%;
}
}
</style>
</head>
<body>
<div class="font-move">
<div class="move-box-layer">
<span>已推送5家打车公司...</span>
<span>已推送嘀嘀打车...</span>
<span>已推送快的打车...</span>
<span>已推送打车小秘...</span>
<span>已推送大黄蜂打车...</span>
<span>已推送摇摇打车...</span>
</div>
</div>
</body>
</html>

阅读全文

0 0