CSS鼠标悬停文字加中括号效果

2014-05-01 08:52:13 -0400

此代码仅供参考

代码说明

CSS打造鼠标经过时的Hover效果，当鼠标滑过时，对应的元素会添加中括号，以着重显示相应内容，当用户鼠标离开元素时，恢复元素原有的样式显示。

html代码(一)

<style type="text/css">
.cl-effect a::before,.cl-effect a::after{display:inline-block;opacity:0;-webkit-transition:-webkit-transform .3s,opacity .2s;-moz-transition:-moz-transform .3s,opacity .2s;transition:transform .3s,opacity .2s;}
.cl-effect a::before{margin-right:5px;content:'[';-webkit-transform:translateX(20px);-moz-transform:translateX(20px);transform:translateX(20px);color:#50a456;}
.cl-effect a::after{margin-left:5px;content:']';-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);transform:translateX(-20px);color:orange;}
.cl-effect a:hover{border-bottom:0;}
.cl-effect a:hover::before,.cl-effect a:hover::after,.cl-effect a:focus::before,.cl-effect a:focus::after,.cl-effect a.active::before,.cl-effect a.active::after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);}
</style>

<nav class="cl-effect" id="cl-effect">
        <a title="动效演示" href="//tzs.wodemo.com" class="active">演示</a>
        <a title="我的图片" href="/cat/8185">图片</a>
        <a title="我的音乐" href="/cat/8186">音乐</a>
        <a title="我的视频" href="/cat/8187">视频</a>
        
</nav>

html代码(二)

<style type="text/css">
nav{width:60%;margin:0 auto;text-align:left;font-family:"微软雅黑";}
nav a{position:relative;display:inline-block;outline:0;text-decoration:none;text-transform:uppercase;letter-spacing:1px;font-weight:400;font-size:13px;padding:5px 0;margin:5px 0;}
nav a.active{color:#555;}
.cl-effect a::before,.cl-effect a::after{display:inline-block;opacity:0;-webkit-transition:-webkit-transform .3s,opacity .2s;-moz-transition:-moz-transform .3s,opacity .2s;transition:transform .3s,opacity .2s;}
.cl-effect a::before{margin-right:5px;content:'[';-webkit-transform:translateX(20px);-moz-transform:translateX(20px);transform:translateX(20px);color:#50a456;}
.cl-effect a::after{margin-left:5px;content:']';-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);transform:translateX(-20px);color:orange;}
.cl-effect a:hover{border-bottom:0;}
.cl-effect a:hover::before,.cl-effect a:hover::after,.cl-effect a:focus::before,.cl-effect a:focus::after,.cl-effect a.active::before,.cl-effect a.active::after{opacity:1;-webkit-transform:translateX(0px);-moz-transform:translateX(0px);transform:translateX(0px);}
</style>

<nav class="cl-effect" id="cl-effect">
        <a title="动效演示" href="//tzs.wodemo.com" class="active">演示</a>
        <a title="我的图片" href="/cat/8185">图片</a>
        <a title="我的音乐" href="/cat/8186">音乐</a>
        <a title="我的视频" href="/cat/8187">视频</a>
        
</nav>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N