21种创意链接效果

使用伪元素和 css 动画创建的 21 种导航菜单创意链接效果。

在示例中，使用鼠标悬停动画，但是你也可以做成点击或初始化开始显示动画。

注：不是所有的浏览器都支持伪元素过渡效果。

HTML

在 HTML 中创建一个具有链接的导航条：

<nav class="cl-effect-13">
	<a href="#">Beleaguer</a>
	<a href="#">Lassitude</a>
	<a href="#">Murmurous</a>
	<a href="#">Palimpsest</a>
	<a href="#">Assemblage</a>
</nav>

对于某些特殊效果，我们可能会使用 data 属性来重复使用于伪元素中的链接：

<nav class="cl-effect-11">
	<a href="#" data-hover="Desultory">Desultory</a>
	<a href="#" data-hover="Sumptuous">Sumptuous</a>
	<a href="#" data-hover="Scintilla">Scintilla</a>
	<a href="#" data-hover="Propinquity">Propinquity</a>
	<a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

在某些情况下，我们也可能会使用 span ，因为可能要实现更精确的效果。

<nav class="cl-effect-10">
	<a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
	<a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
	<a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
	<a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
	<a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

CSS

其中一个效果的示例样式如下。它将一个伪元素放在实际的链接文本之上，当鼠标悬停的时候，使伪元素通过缩放消失，并使其淡出（html 结构使用上面的第二个）：

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
	color: rgba(0,0,0,0.2);
	font-weight: 700;
	text-shadow: none;
}

.cl-effect-15 a::before {
	color: #fff;
	content: attr(data-hover);
	position: absolute;
	transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
	transform: scale(0.9);
	opacity: 0;
}

希望这些链接效果集合能够给你带来一些不错的灵感。

注：IE10 不支持 transform-style：preserve-3d