|
原本是为了在自己做的一个迷你音乐播放器上，加入歌名或作者名太长自动滚动的效果，想尽可能的用CSS来实现走马灯，网上稍微找了下没有理想的效果，于是自己整了一个，先上效果图和实例地址
实例地址：http://www.wd1x.com/css/canvas10.html
并且我认为使用的代码也十分简洁
<style>
* {
margin:0;padding: 0;
font-size: 50px;
color:#fff;
}
.block {
width: 500px;
background-color: #65b4ae;
white-space: nowrap;
overflow: hidden;
}
.words {
position: relative;
width: fit-content;
animation:move 4s linear infinite;
padding-left:50px;
}
.words::after{
position: absolute;
right:-100%;
content:attr(text);
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
<body>
<div class="block">
<p class="words" text="HOW YOU LIKE THAT">
HOW YOU LIKE THAT
</p>
</div>
</body>
首先 p标签的宽度要用fit-content属性，用来定义宽度为文本长度，否则translateX的就不是文本长度而是原本p元素的长度。
伪元素after用来成为 走马灯的循环文字，内容是用attr函数来获取文本。并且是用绝对定位，这样在使用动画的时候，translateX(-100%) ，只会移动到第一段文本结尾，这段文字不会被计算进去。
这样一个简单的纯CSS走马灯就实现了。
然鹅有一个小小的问题，就是走马灯每圈时间都是固定的，速度会随着文本的长度变化而变化，我希望每个不同长度的文本都是以恒定速度来走的。
如果是用vue来写的话，p标签可以稍微改动一下就能实现以恒定速度走。
<p
class="words"
ref="words"
:text="content"
:style="{animationDuration:words && words.offsetWidth / 150 + 's'}"
>
{{content}}
</p>
这样一个简单的纯（伪）CSS走马灯就实现了。
|
