使用纯 CSS3 收集 20 多种微妙而现代的链接效果

版本:

浏览量:1159

最后更新：2021-09-09

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

在MARY LOU撰写的这篇文章中，我们将使用伪元素上的 CSS3 过渡创建超过 21 种微妙和现代的链接效果（滑动、翻转、3D旋转等）。

如何使用它：

1.创建html

<nav class="cl-effect-1" id="cl-effect-1">
<a href="#cl-effect-1">Link 1</a>
<a href="#cl-effect-1">Link 2</a>
<a href="#cl-effect-1">Link 3</a>
...
</nav>

2. CSS

nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
nav a:hover, nav a:focus {
outline: none;
}
/* Effect 1: Brackets */
.cl-effect-1 a::before, .cl-effect-1 a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.cl-effect-1 a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}
.cl-effect-1 a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}
.cl-effect-1 a:hover::before, .cl-effect-1 a:hover::after, .cl-effect-1 a:focus::before, .cl-effect-1 a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}

联系我们