<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, user-scalable=no"
/>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge,chrome=1"
/>
<
meta
name=
"renderer"
content=
"webkit"
/>
<
title
>恭喜沙鑫捡钱
</
title
>
<
style
>
.gundongBox {
width:
300px;
height:
30px;
margin:
200px
auto;
position:
relative;
overflow:
hidden;
background:
pink;
}
.gundongList {
position:
absolute;
animation: geiwogun
12s
linear
infinite;
white-space:
nowrap;
}
.gundongList span {
font-size:
20px;
color:
#000;
padding:
5px
10px
}
@keyframes
geiwogun {
from {
transform:
translate(
0,
0);
}
to {
transform:
translate(
-50%,
0);
}
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"gundong"
>
<
div
class=
"gundongBox"
>
<
div
class=
"gundongList"
>
<
span
>恭喜 沙鑫 捡到100块
</
span
>
<
span
>恭喜 沙鑫 又捡到100块
</
span
>
<
span
>恭喜 沙鑫 再捡到100块
</
span
>
<
span
>恭喜 沙鑫 还捡到100块
</
span
>
<
span
>恭喜 沙鑫 捡到100块
</
span
>
<
span
>恭喜 沙鑫 又捡到100块
</
span
>
<
span
>恭喜 沙鑫 再捡到100块
</
span
>
<
span
>恭喜 沙鑫 还捡到100块
</
span
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>