用 CSS 做一个选框

2022-09-11 10:34:42 阅读：221 来源： 互联网

标签：translateX 一个 100% 宽度版权 400px div 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；  
 动画方向：交替；  
 }  
 复制代码

这样，我们的最终效果就达到了。让我们看一下下面的所有代码。

这篇文章的链接： https://homecpp.art/1310/7531/1627

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用 CSS 做一个选框