这篇文章介绍了如何在网页前端中实现视差卡片效果的分类页面，包括制作三维效果卡片和定制卡片结构。作者分享了自己的经验和代码，帮助读者实现类似的效果。该效果可以提升网页的视觉效果和用户体验。
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉之前用的一直是图片画廊，感觉图片画廊的样式不是很好看，最近寻觅的时候发现了一个比较有趣的方形卡片的视差效果感觉很不错。所以就将原本的项目移植到了分类页面。整个移植是针对Hexo博客来的，不过应该是能通用更多的页面。
展示效果
Demo（目前采用非三维效果）
引用站外地址，不保证站点的可用性和安全性
代码
编辑source/categories/index.md，将type对应的值删掉。粘贴以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/3dCard/in3d.css">
<div id='libCategories'>
<div id="lib-cards" class="container">
<a href='/categories/经验分享/'>
<card data-image="https://p.zhheo.com/646d6131d4e522e7d700b4bb1d3cd21ccdceea02.png!cover">
<h1 slot="header">经验分享</h1>
<p slot="content">原创内容或翻译内容，分享经验和想法，涵盖设计实践、设计理论、开发、软件及系统使用、教程等多个领域</p>
</card>
</a>
<a href='/categories/翻译内容/'>
<card data-image="https://p.zhheo.com/7HrCfl22390181609860203724.png!cover">
<h1 slot="header">翻译内容</h1>
<p slot="content">国外优秀的经验和内容原创译文分享，消除语言隔阂，寻找最先锋最领先的设计思路和设计方法，或者是优秀的国外内容。</p>
</card>
</a>
<a href='/categories/资源中心/'>
<card data-image="https://p.zhheo.com/65002366767c3beb88ca679dbdbad7cf0eafbc09.png!cover">
<h1 slot="header">资源中心</h1>
<p slot="content">汇聚市面上难以寻找的资源，尽可能不上传侵犯版权的文件资源，如有违规行为请联系作者禁用文章。资源仅供学习交流使用。</p>
</card>
</a>
<a href='/categories/优质推荐/'>
<card data-image="https://p.zhheo.com/32c1b437eaa5959f8bb3c530b8af7ac4fec2ee25.png!cover">
<h1 slot="header">优质推荐</h1>
<p slot="content">优秀的网站、软件总是会被信息洪流所淹没。在这里我会推荐一些实用的网站、实用的软件。在这里一定可以发现你想要的宝藏。</p>
</card>
</a>
<a href='/categories/佳作推荐/'>
<card data-image="https://p.zhheo.com/2c6b63e7825b17a66f96c17eddd94207d5769333.png!cover">
<h1 slot="header">佳作推荐</h1>
<p slot="content">优秀的设计作品总是令人叹为观止。在这里你能看到令人惊艳的设计作品。我会将优秀的设计作品都分享到这里。</p>
</card>
</a>
<a href='/categories/自研工具/'>
<card data-image="https://p.zhheo.com/d13ef73a69791b50af0dfc077002dc29aaad1158.png!cover">
<h1 slot="header">自研工具</h1>
<p slot="content">从初中的时候我就是一个开发者，当时主要做一款Wwrite的写作工具。梦的起点开始了，或许未来，我也会成为一个开发者。</p>
</card>
</a>
<a href='/categories/闲聊杂谈/'>
<card data-image="https://p.zhheo.com/0f1b9b72790b264f8b23d2c13b1f8718f873b209.png!cover">
<h1 slot="header">闲聊杂谈</h1>
<p slot="content">表达一些当时的想法，算是一个公开的类似日记的事物吧。不过不常更新。分享生活，分享经历和状态。</p>
</card>
</a>
<a href='/categories/转载内容/'>
<card data-image="https://p.zhheo.com/a092ad95cddf1006c6b26ee2bfc0ea2027881b47.png!cover">
<h1 slot="header">转载内容</h1>
<p slot="content">只是防止原作者站挂掉或者内容被删除所做的备份，建议访客点击访问原文进行阅读。原文地址放在文章最顶部。</p>
</card>
</a>
</div>
</div>
<div class='js-pjax'>
<script src='https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/3dCard/in3d.js"></script>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/3dCard/no3d.css">
<div id='libCategories'>
<div id="lib-cards" class="container">
<a href='/categories/经验分享/'>
<card data-image="https://p.zhheo.com/646d6131d4e522e7d700b4bb1d3cd21ccdceea02.png!cover">
<h1 slot="header">经验分享</h1>
<p slot="content">原创内容或翻译内容，分享经验和想法，涵盖设计实践、设计理论、开发、软件及系统使用、教程等多个领域</p>
</card>
</a>
<a href='/categories/翻译内容/'>
<card data-image="https://p.zhheo.com/7HrCfl22390181609860203724.png!cover">
<h1 slot="header">翻译内容</h1>
<p slot="content">国外优秀的经验和内容原创译文分享，消除语言隔阂，寻找最先锋最领先的设计思路和设计方法，或者是优秀的国外内容。</p>
</card>
</a>
<a href='/categories/资源中心/'>
<card data-image="https://p.zhheo.com/65002366767c3beb88ca679dbdbad7cf0eafbc09.png!cover">
<h1 slot="header">资源中心</h1>
<p slot="content">汇聚市面上难以寻找的资源，尽可能不上传侵犯版权的文件资源，如有违规行为请联系作者禁用文章。资源仅供学习交流使用。</p>
</card>
</a>
<a href='/categories/优质推荐/'>
<card data-image="https://p.zhheo.com/32c1b437eaa5959f8bb3c530b8af7ac4fec2ee25.png!cover">
<h1 slot="header">优质推荐</h1>
<p slot="content">优秀的网站、软件总是会被信息洪流所淹没。在这里我会推荐一些实用的网站、实用的软件。在这里一定可以发现你想要的宝藏。</p>
</card>
</a>
<a href='/categories/佳作推荐/'>
<card data-image="https://p.zhheo.com/2c6b63e7825b17a66f96c17eddd94207d5769333.png!cover">
<h1 slot="header">佳作推荐</h1>
<p slot="content">优秀的设计作品总是令人叹为观止。在这里你能看到令人惊艳的设计作品。我会将优秀的设计作品都分享到这里。</p>
</card>
</a>
<a href='/categories/自研工具/'>
<card data-image="https://p.zhheo.com/d13ef73a69791b50af0dfc077002dc29aaad1158.png!cover">
<h1 slot="header">自研工具</h1>
<p slot="content">从初中的时候我就是一个开发者，当时主要做一款Wwrite的写作工具。梦的起点开始了，或许未来，我也会成为一个开发者。</p>
</card>
</a>
<a href='/categories/闲聊杂谈/'>
<card data-image="https://p.zhheo.com/0f1b9b72790b264f8b23d2c13b1f8718f873b209.png!cover">
<h1 slot="header">闲聊杂谈</h1>
<p slot="content">表达一些当时的想法，算是一个公开的类似日记的事物吧。不过不常更新。分享生活，分享经历和状态。</p>
</card>
</a>
<a href='/categories/转载内容/'>
<card data-image="https://p.zhheo.com/a092ad95cddf1006c6b26ee2bfc0ea2027881b47.png!cover">
<h1 slot="header">转载内容</h1>
<p slot="content">只是防止原作者站挂掉或者内容被删除所做的备份，建议访客点击访问原文进行阅读。原文地址放在文章最顶部。</p>
</card>
</a>
</div>
</div>
<div class='js-pjax'>
<script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js'></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/js-heo@1.0.11/3dCard/no3d.js"></script>
</div>
|
定制
其中需要编辑的就是这个卡片结构。
a标签对应的是链接，然后card标签中data-image、h1标签、p标签描述都是需要修改的。按照以下格式修改：
1
2
3
4
5
6
| <a href='/categories/经验分享/'>
<card data-image="https://p.zhheo.com/646d6131d4e522e7d700b4bb1d3cd21ccdceea02.png!cover">
<h1 slot="header">经验分享</h1>
<p slot="content">原创内容或翻译内容，分享经验和想法，涵盖设计实践、设计理论、开发、软件及系统使用、教程等多个领域</p>
</card>
</a>
|
原作者项目
Hover Responsive Parallax Cards Made w/ Vue
