<head>
<meta charset="utf-8">
<style>
.item{
height:100px;
width:200px;
background:pink;
}
.marquee {
overflow: hidden;
}
.marquee .marquee-wrap {
width: 100%;
animation: marquee-wrap 4s infinite linear;
}
.marquee .marquee-content {
float: left;
white-space: nowrap;
min-width: 100%;
animation: marquee-content 4s infinite linear;
}
@keyframes marquee-wrap{
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(100%);
}
}
@keyframes marquee-content{
0%,
30% {
transform: translateX(0);
}
70%,
100% {
transform: translateX(-100%);
}
}
</style>
</head><body>
<ul>
<li class="item marquee">
<div class="marquee-wrap">
<div class="marquee-content">
这个是非超长数据不动。
</div>
</div>
</li>
<li class="item marquee">
<div class="marquee-wrap">
<div class="marquee-content">
这是头,这个是超长数据,我超长了哦,我超长了哦,我超长了哦。
</div>
</div>
</li>
</ul>
</body>
css3动画实现滚动字,超出滚动,不超出不滚动
于 2023-10-09 14:25:49 首次发布