创意链接效果

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

 32824  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。

相关插件-动画效果

基于Three.js 3d波浪墙

Three.js波浪墙,3D效果
  动画效果
 54294  611

love

程序员之间的故事
  动画效果
 38993  622

步骤填写表单

美观的填写表单界面
  动画效果
 47897  411

jQuery超酷文字淡入淡出显示特效

文字淡入淡出显示特效
  动画效果
 35792  363

讨论这个项目(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某些效果支持,大部分都不支持呢。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复