仿知乎网站卡片链接样式(纯CSS/JS两种方法)


Chrome
Firefox
Safari
ie9+

在线演示
本商品为电子商品,具有可复制性,一经售出,不可退换!

今天刷知乎的时候发现知乎上的链接卡片样式不错,想仿下来留着以后用。于是,习惯性在网上搜了一下,发现早有网友仿下来了。

看时间,他是2018年仿的;和我今天看到的还是略有差别。于是在此基础上我做了些改进。

这个样式可以通过两种方式实现:

JS版使用方法

html 代码:

<a target="_blank" href="https://www.yqlyz.com"  class="LinkCard" rel="noopener noreferrer">一千零一站</a>

然后引入 linkcard.js 文件即可。

CSS版使用方法

先引入 css 文件。

html 代码:

<strong>知乎之前的网站卡片</strong>
<a target="_blank" href="https://www.yqlyz.com"  class="LinkCard" rel="noopener noreferrer">
	<span class="LinkCard-backdrop"></span>
	<span class="LinkCard-content">
		<span class="LinkCard-text">
			<span class="LinkCard-title">一千零一站</span>
			<span class="LinkCard-meta">
				<span style="display:inline-flex;align-items:center">​
					<svg class="Zi Zi--InsertLink" fill="currentColor" viewBox="0 0 24 24" width="17" height="17"><path d="M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z" fill-rule="evenodd"></path></svg>
				</span>https://www.yqlyz.com/
			</span>
		</span>
		<span class="LinkCard-imageCell">
			<img class="LinkCard-image" alt="图标" src="linkcard.png">
		</span>
	</span>
</a>

<strong>知乎2019 无图标的网站卡片</strong>
<a target="_blank" href="https://www.yqlyz.com"  class="LinkCard" rel="noopener noreferrer">
	<span class="LinkCard-backdrop"></span>
	<span class="LinkCard-content" style="background-color: #f6f6f6;">
		<span class="LinkCard-text">
			<span class="LinkCard-title">一千零一站</span>
			<span class="LinkCard-meta">
				<span style="display:inline-flex;align-items:center">​
					<svg class="Zi Zi--InsertLink" fill="currentColor" viewBox="0 0 24 24" width="17" height="17"><path d="M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z" fill-rule="evenodd"></path></svg>
				</span>https://www.yqlyz.com/
			</span>
		</span>
		<span class="LinkCard-imageCell">
			<div class="LinkCard-image LinkCard-image--default">
				<svg class="Zi Zi--Browser" fill="currentColor" viewBox="0 0 24 24" width="32" height="32"><path d="M11.991 3C7.023 3 3 7.032 3 12s4.023 9 8.991 9C16.968 21 21 16.968 21 12s-4.032-9-9.009-9zm6.237 5.4h-2.655a14.084 14.084 0 0 0-1.242-3.204A7.227 7.227 0 0 1 18.228 8.4zM12 4.836A12.678 12.678 0 0 1 13.719 8.4h-3.438A12.678 12.678 0 0 1 12 4.836zM5.034 13.8A7.418 7.418 0 0 1 4.8 12c0-.621.09-1.224.234-1.8h4.042A14.864 14.864 0 0 0 7.95 12c0 .612.054 1.206.126 1.8H5.034zm.738 1.8h2.655a14.084 14.084 0 0 0 1.242 3.204A7.188 7.188 0 0 1 5.772 15.6zm2.655-7.2H5.772a7.188 7.188 0 0 1 3.897-3.204c-.54.999-.954 2.079-1.242 3.204zM12 19.164a12.678 12.678 0 0 1-1.719-3.564h4.438A12.678 12.678 0 0 1 12 19.164zm2.106-5.364H9.894A13.242 13.242 0 0 1 9.75 12c0-.612.063-1.215.144-1.8h4.212c.081.585.144 1.188.144 1.8 0 .612-.063 1.206-.144 1.8zm.225 5.004c.54-.999.954-2.079 1.242-3.204h2.655a7.227 7.227 0 0 1-3.897 3.204zm1.593-5.004c.072-.594.126-1.188.126-1.8 0-.612-.054-1.206-.126-1.8h4.042c.144.576.234 1.179.234 1.8s-.09 1.224-.234 1.8h-3.042z"></path></svg>
			</div>
		</span>
	</span>
</a>

<strong>知乎2019 有图标的网站卡片</strong>
<a target="_blank" href="https://www.yqlyz.com"  class="LinkCard" rel="noopener noreferrer">
	<span class="LinkCard-backdrop"></span>
	<span class="LinkCard-content" style="background-color: #f6f6f6;">
		<span class="LinkCard-text">
			<span class="LinkCard-title">一千零一站</span>
			<span class="LinkCard-meta">
				<span style="display:inline-flex;align-items:center">​
					<svg class="Zi Zi--InsertLink" fill="currentColor" viewBox="0 0 24 24" width="17" height="17"><path d="M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z" fill-rule="evenodd"></path></svg>
				</span>https://www.yqlyz.com/
			</span>
		</span>
		<span class="LinkCard-imageCell">
			<img class="LinkCard-image" alt="图标" src="logo-1001.png">
		</span>
	</span>
</a>
参考

<< JS 根据鼠标滑过的方向,展现3D反转的网页特效


没有账号? 忘记密码?

社交账号快速登录