用 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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27322/14541110

标签：translateX,一个,100%,宽度,版权,400px,div,CSS,选框
来源： https://www.cnblogs.com/amboke/p/16683613.html