网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
非常好看的文本边框动画网页特效,当鼠标悬停在文本上时,触发动画。一共有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>
转载请注明来源:13种css3文本悬停边框样式动画特效
本文永久链接地址:https://www.moyouyouw.cn/code/1023.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论