用 CSS 做一个选框
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
转灯是一种比较常见的展示方式，尤其是在营销页面上，中奖信息往往以转灯的形式展示。过去在 HTML 中经常使用 marquee 来实现，但根据 W3C 规范，不再推荐使用此功能。虽然有些浏览器仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除，或者可能为了兼容性而保留，所以如果可以的话，它是无用的。而且，即使在支持marquee的safari浏览器上，你也会发现抖动非常严重。
现有的一些第三方类库基本都是使用JavaScript来实现跑马灯效果。今天我们尝试用纯CSS来实现这个功能。最终效果如下：
首先，我们模拟一段文字，放到#box中，像这样：
< div id = "盒子" >
< div class = "text" >Mlhw nwxqyq xtmpqqhz jjrdefbsn lirgdrhhh wdlyrsly smlr nlbxvjapu gyhqibjf jrf wqvl rxjjjgl fwb pzv nibd gwwbbyfas jtcpqj dzibomvfqe。</ div >
</ div >
复制代码
我们为#box 设置最大宽度并隐藏超出该宽度的内容：
＃盒子 {
边框：1px 实心#eee；
宽度：400px；
溢出：隐藏；
}
。文本 {
空白：nowrap；
}
复制代码
完成后会显示以下内容：
最后，我们需要看看最终动画的样子。
下图是初始化时的状态，#box宽度为400px，.text宽度为100%。
下图是我们想要的最终状态。可以很容易地看出，两张图片之间的偏移量是 400px — 100%。
换算成我们的计算机语言，可以认为对于.text元素，从 translateX(0) 到 translateX(calc(400px — 100%))，我们在原函数的基础上添加如下代码
@keyframes 移动 {
0% {
变换：translateX（0）；
}
100% {
变换：translateX（计算（400px - 100%））；
}
}
。文本 {
显示：内联块；
最小宽度：100%；
空白：nowrap；
动画：无限移动15s；
动画方向：交替；
}
复制代码
这样，我们的最终效果就达到了。让我们看一下下面的所有代码。
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/1310/7531/1627
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
