创意链接效果

所属分类:其他-动画效果

 32767  428  查看评论 (0)
分享到微信朋友圈
X
创意链接效果 ie兼容

今天,我们想与你分享一些实验性和创造性的链接效果。我们的想法是使用伪元素和动画创建一个微妙的和现代的效果。在例子中,我们使用悬停过渡,但你也可以想像这些点击或作为初始动画效果。

请注意:当前插件只支持以下浏览器./>


在大多数情况下,是一个简单的导航的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。

相关插件-动画效果

纯JS数字滚动效果(原创)

纯JS数字滚动效果,兼容IE9+、但不兼容水晶字体,需要谷歌浏览器支持
  动画效果
 39146  300

HTML5+CSS3音量调节旋转按钮

可以拨动让物体旋转,很不错
  动画效果
 41343  382

css3折纸效果

css3折纸效果
  动画效果
 40698  383
  动画效果
 62203  614

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    JQ剑圣 0
    2014/4/10 16:19:00

    效果超赞,真的很有创意~~

    回复
    插件王子 0
    2013/10/8 9:30:00
    楼上很认真,没错,主要是IE9本身对html5的支持就不是很好。用EdgeAnimate作一些html5动画时你就会发现ie9下都是无发显示的。 回复
    魔界小鸟 0
    2013/10/7 17:39:00
    IE9以下的我测试过了,都不支持,IE9某些效果支持,大部分都不支持呢。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复