html css 走马灯,纯css 实现跑马灯效果

重点：使用 inline-block 获取实际文本的宽度

由于

标签的宽度为父元素的 100%，如果是这样，我们很难进行下面的操作。我们首先需要拿到实际文本的宽度，这里可以借助 inline-block 的特性，做到这一点.

.wrap {

position: relative;

width: 200px;

height: 100vh;

background: #ddd;

overflow: hidden;

}

span {

display: inline-block;

white-space: nowrap;

padding: 5px;

line-height: 24px;

cursor: pointer;

}

.one:hover {

animation: move 5s infinite alternate linear;

}

@keyframes move {

0% {

transform: translate(0, 0);

}

100% {

transform: translate(calc(-100% + 200px), 0);

}

}

Overflow scorll left to right Overflow

AAA BBB CCC DDD EEE FFF DDD GGG

AAA BBB CCC

AAA BBB CCC DDD EEE FFF DDD GGG HHH III

image.png

有时候我们也不确定父元素的宽度，这时候我们只要改变一下我们动画效果

.wrap {

position: relative;

width: 10vw;

height: 100vh;

background: #ddd;

overflow: hidden;

resize: horizontal;

}

.wrap::-webkit-scrollbar {

width: 200px;

height: 200px;

}

span {

position: relative;

display: inline-block;

white-space: nowrap;

padding: 5px;

line-height: 24px;

cursor: pointer;

transition: .5s all;

will-change: left, transform;

}

.scroll:hover {

animation: move 2s infinite alternate linear;

}

@keyframes move {

0% {

left: 0;

transform: translate(0, 0);

}

100% {

left: 100%;

transform: translate(-100%, 0);

}

}

Overflow scorll left to right

Overflow

AAA BBB CCC DDD EEE FFF DDD GGG

AAA BBB CCC

AAA BBB CCC DDD EEE FFF DDD GGG HHH

III