比较有创意的链接效果

在大多数情况下，是一个简单的导航的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>
但对于一些特殊的效果，我们可能会使用数据属css连结文字：
<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>
我们也可能在某些情况下，使用范围，因为我们要添加的角度对每个项目或实现另一个效果。
<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>
例如，下面的样式。伪元素之上，实际的链接文本和悬停定位，我们将缩减下来，并使其淡出（第二个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属性，用于在一些例子。由于我们无法测试尚未使用Modernizr的，你可以尝试使用建议的解决方案之一，用于检测IE10。