帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-12-22 网页特效 评论

介绍

非常好看的文本边框动画网页特效,当鼠标悬停在文本上时,触发动画。一共有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>
人生不要怕失败,因为失败连着成功。只有那些有勇气的人,才敢不断挑战人生。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言