"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "介绍", "hProperties": { "id": "介绍" } }, "depth": 2, "value": "介绍" }, { "data": { "id": "创建一排卡片", "hProperties": { "id": "创建一排卡片" } }, "depth": 2, "value": "创建一排卡片" }, { "data": { "id": "复制卡片", "hProperties": { "id": "复制卡片" } }, "depth": 2, "value": "复制卡片" }, { "data": { "id": "动画轮播", "hProperties": { "id": "动画轮播" } }, "depth": 2, "value": "动画轮播" }, { "data": { "id": "最后的想法", "hProperties": { "id": "最后的想法" } }, "depth": 2, "value": "最后的想法" }]; const readingTime = { "minutes": 3, "words": 964, "text": "3 min read" }; const frontmatter = undefined; const Styles = () => { const _components = { style: "style", ..._provideComponents() }; return _jsx(_components.style, { dangerouslySetInnerHTML: { __html: ` .card { width: 100%; color: #fff; border-radius: 24px; box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0; padding: 20px; font-size: xx-large; display: flex; justify-content: center; align-items: center; min-height: 200px; } .card:nth-child(1) { background: #7958ff; } .card:nth-child(2) { background: #5d34f2; } .card:nth-child(3) { background: #4300da; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel { margin: 0 auto; padding: 20px 0; max-width: 700px; overflow: hidden; display: flex; } .carousel.animated:hover .group { animation-play-state: paused; } .carousel:not(.basic) > * { flex: 0 0 100%; } .group { display: flex; gap: 20px; padding-right: 20px; will-change: transform; } .group.animated { animation: scrolling 10s linear infinite; } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } ` } }); }; const RowOfCards = () => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: "carousel basic", children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }); }; const Cards = ({isAnimated}) => { const _components = { div: "div", ..._provideComponents() }; return _jsxs(_components.div, { className: ['carousel', isAnimated && 'animated'].join(' '), children: [_jsxs(_components.div, { className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] }), _jsxs(_components.div, { "aria-hidden": true, className: ['group', isAnimated && 'animated'].join(' '), children: [_jsx(_components.div, { className: "card", children: "A" }), _jsx(_components.div, { className: "card", children: "B" }), _jsx(_components.div, { className: "card", children: "C" })] })] }); }; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {Note} = _components; if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(Styles, {}), "\n", _jsxs(_components.h2, { id: "介绍", children: ["介绍", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#介绍", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "我们当然爱 JavaScript。不过，看看仅用 CSS 能做到什么总是很有趣——尤其是涉及动画时，因为 CSS 动画通常比 JavaScript 动画“更轻量”。" }), "\n", _jsx(_components.p, { children: "在这篇文章中，我将向你展示如何仅用 CSS 创建一个无限滚动轮播动画，并带有悬停时暂停的效果。以下是我们将构建的预览：" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["本教程使用了 ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector", children: "& 嵌套选择器\n语法" }), "，这是 2023 年的基线功能。如果你是在为旧浏览器编写代码，请相应调整代码。"] }) }), "\n", _jsxs(_components.h2, { id: "创建一排卡片", children: ["创建一排卡片", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#创建一排卡片", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "首先，让我们创建轮播的基础结构。考虑一下这样的一排卡片：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n" }) }), "\n", _jsx(RowOfCards, {}), "\n", _jsx(_components.p, { children: "看起来不错吧？这些卡片可以是你华丽的横幅、产品图片，或者你想在轮播中展示的任何内容。" }), "\n", _jsxs(_components.h2, { id: "复制卡片", children: ["复制卡片", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#复制卡片", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "因为我们希望轮播是无限的，所以它应该是首尾相连的。直觉上，我们可以尝试重复这些卡片：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "查看结果：" }), "\n", _jsx(Cards, {}), "\n", _jsx(_components.p, { children: "只有第一组卡片是可见的。如果你查看 HTML，你会看到第二组卡片被隐藏并且跟在第一组之后。" }), "\n", _jsxs(_components.h2, { id: "动画轮播", children: ["动画轮播", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#动画轮播", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "是时候为轮播添加动画了！由于我们已有两组连接在一起的卡片，我们可以通过变换卡片组来为轮播添加动画。方法如下：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "我们还需要补充最后一个细节：当鼠标悬停在轮播上时暂停动画。这将给用户更多的时间来清楚地查看内容。由于我们有两组卡片，因此在悬停在轮播上时我们需要暂停两个组的动画：" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n" }) }), "\n", _jsx(_components.p, { children: "就是这样！🎊 现在轮播在你悬停时会暂停。" }), "\n", _jsx(Cards, { isAnimated: true }), "\n", _jsxs(_components.h2, { id: "最后的想法", children: ["最后的想法", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#最后的想法", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["CSS 是很强大的，探索我们能用它做到什么总是令人愉快的。而且还有其他 CSS 属性，如 ", _jsx(_components.code, { children: "scroll-snap-type" }), " 和 ", _jsx(_components.code, { children: "scroll-snap-align" }), "，可以帮助你创建一个交互式轮播。编码愉快！🚀"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, Styles, RowOfCards, Cards, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }