13种css3文本悬停边框样式动画特效

演示  website 下载

介绍

非常好看的文本边框动画网页特效，当鼠标悬停在文本上时，触发动画。一共有13类动画效果，每个效果都添加了令人惊叹的动画边框。

使用方法

1.在页面中添加边框样式css文件。

<link rel="stylesheet" href="./style.css">

2.添加文本代码。

 <span class="underline-left">悬停查看效果</span>

3.css边框样式

 <ul class="effects-list">
        <li class="item-divider">下划线</li>
       <li class="item item-active">underline-left</li>
       <li class="item">underline-right</li>
       <li class="item">underline-closing</li>
       <li class="item">underline-opening</li>

       <li class="item-divider">双下划线</li>
       <li class="item">double-underline-left</li>
       <li class="item">double-underline-right</li>
       <li class="item">double-underline-opening</li>
       <li class="item">double-underline-left-right</li>
       <li class="item">double-underline-right-left</li>

       <li class="item-divider">上划线</li>
       <li class="item">overline-left</li>
       <li class="item">overline-right</li>
       <li class="item">overline-closing</li>
       <li class="item">overline-opening</li>

       <li class="item-divider">单边</li>
       <li class="item">left-down</li>
       <li class="item">left-up</li>
       <li class="item">right-down</li>
       <li class="item">right-up</li>

       <li class="item-divider">移动</li>
       <li class="item">move-down</li>
       <li class="item">move-up</li>
       <li class="item">move-right</li>
       <li class="item">move-left</li>
       <li class="item">move-vertical</li>
       <li class="item">move-horizontal</li>

       <li class="item-divider">两边</li>
       <li class="item">both-down</li>
       <li class="item">both-up</li>
       <li class="item">both-right</li>
       <li class="item">both-left</li>
       <li class="item">left-up-right-down</li>
       <li class="item">left-down-right-up</li>
       <li class="item">both-opening-horizontal</li>
       <li class="item">overline-left-underline-right</li>
       <li class="item">overline-right-underline-left</li>

       <li class="item-divider">填充</li>
       <li class="item">fill-left</li>
       <li class="item">fill-right</li>
       <li class="item">fill-down</li>
       <li class="item">fill-up</li>
       <li class="item">fill-closing-vertical</li>
       <li class="item">fill-closing-horizontal</li>
       <li class="item">fill-opening-horizontal</li>

       <li class="item-divider">角落填充</li>
       <li class="item">fill-top-left</li>
       <li class="item">fill-top-right</li>
       <li class="item">fill-bottom-left</li>
       <li class="item">fill-bottom-right</li>

       <li class="item-divider">拐角处重合</li>
       <li class="item">left-bottom</li>
       <li class="item">left-top</li>
       <li class="item">right-top</li>
       <li class="item">right-bottom</li>

       <li class="item-divider">角点展开</li>
       <li class="item">bottom-right</li>
       <li class="item">bottom-left</li>
       <li class="item">top-left</li>
       <li class="item">top-right</li>

       <li class="item-divider">穿透</li>
       <li class="item">linethrough-left</li>
       <li class="item">linethrough-right</li>
       <li class="item">linethrough-opening</li>
       <li class="item">linethrough-closing</li>

       <li class="item-divider">双线穿透</li>
       <li class="item">double-linethrough-left</li>
       <li class="item">double-linethrough-right</li>
       <li class="item">double-linethrough-left-right</li>
       <li class="item">double-linethrough-right-left</li>
       <li class="item">double-linethrough-opening</li>

       <li class="item-divider">延时</li>
       <li class="item">double-underline-right-delayed</li>
       <li class="item">top-left-delay</li>
       <li class="item">right-bottom-delay</li>
       <li class="item">double-underline-opening-delayed</li>
       <li class="item">double-linethrough-left-delayed</li>
       <li class="item">double-linethrough-opening-delayed</li>
       <li class="item">fill-closing-horizontal-delayed</li>
       <li class="item">both-left-delayed</li>
     </ul>