{"id":50709231,"url":"https://github.com/coowinit/theme-marquee-gallery","last_synced_at":"2026-06-09T14:01:46.756Z","repository":{"id":363263352,"uuid":"1262562116","full_name":"coowinit/theme-marquee-gallery","owner":"coowinit","description":"纯 HTML + CSS 实现的双向无限滚动网页栅格展示页，支持 hover 遮罩、按钮和详情链接。","archived":false,"fork":false,"pushed_at":"2026-06-08T05:32:10.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-08T07:22:13.958Z","etag":null,"topics":["css","frontend","gallery","html","marquee","responsive-design","svg","web-design"],"latest_commit_sha":null,"homepage":"https://coowinit.github.io/theme-marquee-gallery/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coowinit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-08T05:27:05.000Z","updated_at":"2026-06-08T05:31:31.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coowinit/theme-marquee-gallery","commit_stats":null,"previous_names":["coowinit/theme-marquee-gallery"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coowinit/theme-marquee-gallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Ftheme-marquee-gallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Ftheme-marquee-gallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Ftheme-marquee-gallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Ftheme-marquee-gallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coowinit","download_url":"https://codeload.github.com/coowinit/theme-marquee-gallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coowinit%2Ftheme-marquee-gallery/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34110012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend","gallery","html","marquee","responsive-design","svg","web-design"],"created_at":"2026-06-09T14:01:45.591Z","updated_at":"2026-06-09T14:01:46.749Z","avatar_url":"https://github.com/coowinit.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 双向滚动网页栅格 Gallery\n\n这是一个纯前端 HTML + CSS 示例项目，用来实现类似主题模板展示页的效果：\n\n- 第一排网页截图向右无限滚动\n- 第二排网页截图向左无限滚动\n- 鼠标 hover 到图片时显示半透明遮罩\n- 遮罩中包含一个按钮和一个文本链接\n- 图片使用 SVG 格式，已放入 `images/` 目录\n- 样式文件已独立放入 `css/` 目录\n- 不依赖 JavaScript，不依赖第三方库\n\n## 在线预览\n\n可以通过 GitHub Pages 预览：\n\n```text\nhttps://coowinit.github.io/theme-marquee-gallery/\n```\n\n## 项目结构\n\n```text\ntheme-marquee-gallery/\n├── index.html\n├── README.md\n├── css/\n│   └── style.css\n└── images/\n    ├── theme-grid-01.svg\n    ├── theme-grid-02.svg\n    ├── theme-grid-03.svg\n    ├── theme-grid-04.svg\n    ├── theme-grid-05.svg\n    ├── theme-grid-06.svg\n    ├── theme-grid-07.svg\n    └── theme-grid-08.svg\n```\n\n## 功能说明\n\n### 1. 双向无限滚动\n\n页面中有两条滚动轨道：\n\n- `.row-right`：向右滚动\n- `.row-left`：向左滚动\n\n核心代码在 `css/style.css`：\n\n```css\n.marquee-row.row-right .marquee-track {\n  animation: scroll-right var(--speed) linear infinite;\n}\n\n.marquee-row.row-left .marquee-track {\n  animation: scroll-left var(--speed) linear infinite;\n}\n```\n\n为了实现无缝循环，每一排图片都复制了一组相同内容。这样第一组滚动离开画面时，第二组会自然接上。\n\n### 2. 鼠标 hover 显示遮罩\n\n每张图片都使用 `.theme-card` 包裹，里面包含图片和 `.theme-overlay` 遮罩层。\n\n```html\n\u003carticle class=\"theme-card\"\u003e\n  \u003cimg src=\"images/theme-grid-01.svg\" alt=\"网页栅格图\" /\u003e\n  \u003cdiv class=\"theme-overlay\"\u003e\n    \u003ca class=\"start-theme-btn\" href=\"#\"\u003eStart with this theme\u003c/a\u003e\n    \u003ca class=\"theme-detail-link\" href=\"#\"\u003eTheme details\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n```\n\n默认情况下遮罩透明：\n\n```css\n.theme-overlay {\n  opacity: 0;\n}\n```\n\n鼠标移动到图片上时显示：\n\n```css\n.theme-card:hover .theme-overlay,\n.theme-card:focus-within .theme-overlay {\n  opacity: 1;\n}\n```\n\n## 如何修改图片\n\n把你自己的网页截图放到 `images/` 目录，然后修改 `index.html` 中的图片路径即可：\n\n```html\n\u003cimg src=\"images/你的图片.svg\" alt=\"图片说明\" /\u003e\n```\n\n如果使用 JPG、PNG、WebP 也可以，例如：\n\n```html\n\u003cimg src=\"images/theme-01.jpg\" alt=\"网页截图\" /\u003e\n```\n\n建议图片比例接近：\n\n```text\n860 × 490\n```\n\n或者：\n\n```text\n430 × 245\n```\n\nCSS 中已经使用：\n\n```css\nobject-fit: cover;\n```\n\n所以不同尺寸的图片也会自动裁切填充卡片。\n\n## 如何修改滚动速度\n\n在 `css/style.css` 的 `:root` 中修改：\n\n```css\n--speed: 34s;\n```\n\n数值越小，滚动越快；数值越大，滚动越慢。\n\n例如：\n\n```css\n--speed: 24s;\n```\n\n会比默认速度更快。\n\n## 如何修改卡片尺寸\n\n在 `css/style.css` 的 `:root` 中修改：\n\n```css\n--card-width: 430px;\n--card-height: 245px;\n```\n\n如果想让卡片更大，可以改成：\n\n```css\n--card-width: 520px;\n--card-height: 296px;\n```\n\n## 如何修改间距\n\n修改变量：\n\n```css\n--gap: 24px;\n```\n\n数值越大，图片之间的距离越大。\n\n## 如何修改按钮和链接\n\n按钮文字在 `index.html` 中：\n\n```html\n\u003ca class=\"start-theme-btn\" href=\"#\"\u003eStart with this theme\u003c/a\u003e\n\u003ca class=\"theme-detail-link\" href=\"#\"\u003eTheme details\u003c/a\u003e\n```\n\n你可以改成中文：\n\n```html\n\u003ca class=\"start-theme-btn\" href=\"#\"\u003e使用这个主题\u003c/a\u003e\n\u003ca class=\"theme-detail-link\" href=\"#\"\u003e查看主题详情\u003c/a\u003e\n```\n\n也可以把 `href=\"#\"` 改成真实链接。\n\n## 浏览器兼容性\n\n支持现代浏览器：\n\n- Chrome\n- Edge\n- Firefox\n- Safari\n\n页面使用标准 CSS Animation、Flexbox 和 SVG 图片，不需要额外安装依赖。\n\n## 许可证\n\n你可以自由修改并用于自己的展示页、主题页、产品页或 GitHub Pages 项目。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Ftheme-marquee-gallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoowinit%2Ftheme-marquee-gallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoowinit%2Ftheme-marquee-gallery/lists"}