如何在 2022 年选取元素（最佳实践）
已发表: 2022-08-23本文将讨论在现代网页设计中制作移动选取框元素的最佳方法。
选框是文本和/或视觉元素（如图像）的无限部分，可自动水平滚动。
尽管官方 HTML <marquee> 元素已被贬低并强烈建议不要使用，但用于为网页增添趣味的滚动、连续元素的整体效果在 2022 年仍然存在，并且出现在许多时尚网站中。
有些人甚至仍然使用 Marquee 元素，尽管（再次）不鼓励使用，但所有浏览器仍然支持该元素。 例如，这是使用 HTML 选取框创建的经典弹跳 DVD“屏幕保护程序”。
这并不聪明，但它仍然有效。 2022 年避免使用此元素的原因很明确：
- 它不是真的可以访问
- 它已 100% 折旧，并且可以（并且可能会在某个时候）删除对它的支持
- 它从来都不是真正的 HTML 元素（不是任何标准的一部分）
然而，我们一直是 Isotropic 的字幕粉丝。
看看许多流行的 Awwwards 网站，您会看到文本、图像或两者的组合水平移动，如下所示：
这是一个演示选框
当然，将关键任务信息放在滚动或动画部分中绝不是一个好主意。 但是对于上面的示例，它看起来很酷，可以区分网站并使其令人难忘。 明智而适度地使用它。
Marquees 非常酷，我们甚至发布了一个有用的工具，该工具将使用 CSS 框阴影自动生成滚动文本的“ticker”样式部分。 这很酷，但我认为本文讨论的方法更好。
制作该字幕演示的代码来自 Ryan Mulligan 的 CodePen，这（可能）是 2022 年制作字幕效果的最佳方式。他还在他的博客 https://ryanmulligan.dev/ 中写了有关此代码的内容博客/css-marquee。
它是可访问的（支持prefers-reduced-motion），无限的，允许任何类型的html元素，并且是轻量级且易于实现的。
它也是用 100% CSS 和无 JS 制作的。
<div class="marquee">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzqQ&ixlib=b-1.0.2'1'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=b-1.'0.02&ixlib='>&q='4
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-q=4.0.01'1'1'&ixlib=rb-q=4.02.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-q=4.2'0.0.
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzqQ&ixlib=b-1.0.2'1'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=b-1.'0.02&ixlib='>&q='4
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-q=4.0.01'1'1'&ixlib=rb-q=4.02.
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-q=4.2'0.0.
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>不飞溅的狗</p>
<p aria-hidden="true">Unsplash 的狗</p>
<p aria-hidden="true">Unsplash 的狗</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>不飞溅的狗</p>
<p>不飞溅的狗</p>
<p>不飞溅的狗</p>
</div>
</div>
<div class="marquee marquee--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=&rb-4=2'1'1'>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q=
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q='&q=
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-q=4.02'1 '1'0.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=&rb-4=2'1'1'>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q=
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.'402MDE&ixlib='&q='&q='&q=
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-q=4.02'1 '1'0.
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
box-sizing：边框框；
}
身体 {
最小高度：100vh；
}
身体 {
--空间：2rem；
显示：网格；
对齐内容：居中；
溢出：隐藏；
间隙：var（--空格）；
宽度：100%；
font-family: "Corben", system-ui, sans-serif;
字体大小：1.5rem；
行高：1.5；
}
.选框{
--持续时间：60s；
--gap: var(--space);
显示：弯曲；
溢出：隐藏；
用户选择：无；
间隙：var（--gap）；
变换：skewY(-3deg);
}
.marquee__group {
弹性收缩：0；
显示：弯曲；
对齐项目：居中；
justify-content：空间环绕；
间隙：var（--gap）；
最小宽度：100%；
动画：滚动 var(--duration) 线性无限；
}
@media (prefers-reduced-motion: reduce) {
.marquee__group {
动画播放状态：暂停；
}
}
.marquee__group img {
最大宽度：钳位（10rem，1rem + 28vmin，20rem）；
纵横比：1；
适合对象：封面；
边界半径：1rem；
}
.marquee__group p {
背景图像：线性渐变（
75度，
hsl(240度 70% 49%) 0%,
hsl(253度 70% 49%) 11%,
hsl(267度 70% 49%) 22%,
hsl(280度 71% 48%) 33%,
hsl(293度 71% 48%) 44%,
hsl(307度 71% 48%) 56%,
hsl(320度 71% 48%) 67%,
hsl(333度 72% 48%) 78%,
hsl(347度 72% 48%) 89%,
hsl(0度 73% 47%) 100%
);
-webkit-background-clip：文本；
-webkit-text-fill-color：透明；
}
.marquee--边框{
边框块：3px 实心dodgerblue；
填充块：0.75rem；
}
.marquee--反向 .marquee__group {
动画方向：反向；
动画延迟：计算（var（--duration）/-2）；
}
@keyframes 滚动 {
0% {
变换：翻译X（0）；
}
100% {
变换： translateX(calc(-100% - var(--gap)));
}
}
让我们来看看它是如何创建的以及为什么它如此出色。
这是一个概述，在我们查看所有代码之前：
- 我们可以轻松控制滚动效果的速度和方向。 为了速度，我们设置
.marquee--reverse类。 - 它是模块化的——你可以拥有任意数量的组，方法是使用
.marquee__group类将内容包装在 div 中，使用.marquee包装内部内容。 - 由于它使用 CSS 变量和钳位，因此调整大小具有响应性和流畅性。
- 如果 CSS 的 prefers-reduced-motion 设置为 reduce，它可以使用 aria 标签访问并暂停。
- 移动是使用关键帧的标准 CSS 动画（因此您可以根据需要在悬停时暂停）。 根本没有JS。
- 它也很漂亮的复制/粘贴。 只需更换您的内容，实现 HTML 和 CSS，您就会拥有一个很酷的小字幕。
确实做得很好，（imo）应该是 2022 年实现选取框效果的标准方式。
这是HTML：
在演示中，我们可以看到三个选取框。 第一个和第三个使用.marquee--reverse类反转。 它们具有标准速度，并包含图像。
第二个（中间一个）是所有文本，并使用自定义类实现边框。 它还具有由 style 属性设置的较慢持续时间： .
您还会注意到.marquee div 中基本上存在重复项，除了带有 aria 标记外，它们是相同的。
这是为了使动画无缝无限，同时也能够适应不同的视口比率（当我们查看 CSS 时会详细说明）。
这可以通过aria-hidden="true"访问，它会从可访问性树中删除重复的内容。
此外，图像直接从 Unsplash 提供。 您可能会发现此资源很有趣：如何通过 URL 生成随机图像（Web 开发）
总而言之，它是一个优雅、简单的 HTML 结构。
现在让我们看看 CSS
这是 CSS（直接从 CodePen 中提取）：
我们可以看到以下内容：
- 一切都使用 REM、变量和钳位，这意味着效果是流畅的，并且会对屏幕尺寸和浏览器设置做出反应。
- 动画是 100% CSS。 这是通过
.marquee__group中的“animation: scroll var(--duration) linear infinite;”行来实现的。 动画是无限的、线性的和命名的滚动。 根持续时间由--duration变量控制，可以覆盖该变量以控制 HTML 标记中特定组的速度（如上所述）。 - Scroll是一个基本的变换，平移X。
- 要反转动画，我们只需在
.marquee--reverse .marquee__group类中添加“animation-direction: reverse;”。 - 我们使用 calc 和 --gap 来处理大部分间距。 这使事情变得流畅，您可以更改 Gap 以满足您的需求。
- 有一个倾斜 (3%) 效果使它成为对角线，可以将其移除以使其 100% 水平。
- 它是可访问且负责任的，因为如果设置了 prefers-reduced-motion: reduce （了解如何在此处进行测试），它就不会移动。
基本上，它做的一切都非常好，并且是在 2022 年实现类似滚动选框效果的最佳方式。
要实现，您只需将 HTML 添加到页面，换出文本/图像，然后将 CSS 添加到全局样式中。
您可以使用变量，但实际上这非常即插即用......您不需要更改太多！