您现在的位置是：网站首页> 编程资料编程资料

CSS3绘制有活力的链接下划线CSS3制作hover下划线动画CSS3简单带下划线跟随下拉菜单特效源码CSS中的下划线text-decoration属性使用进阶CSS3实现下划线跟随动画且背景色渐变菜单源码div css布局命名时尽量避免下划线使用CSS去掉网页中超链接的下划线示例不可思议的CSS导航栏下划线跟随效果

2021-09-04 916人已围观

简介 这篇文章主要为大家详细介绍了CSS3有活力的链接下划线绘制方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

链接下划线是非常常见的一种样式，最近做了一个非常简单的视觉效果，非常不错，完整代码查看。

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html>  
  3. <head>  
  4.   <meta charset="gb2312">  
  5.   <meta name="viewport" content="width=device-width">  
  6.   <title>JS Bintitle>  
  7. <style>  
  8. body{   
  9.   background-color: #000;   
  10. }   
  11.   
  12. h2{    
  13.   text-align: center;   
  14.   margin-top: 100px;   
  15. }   
  16.   
  17. h2 > a {   
  18.   position: relative;   
  19.   color: #FFF;   
  20.   text-decoration: none;   
  21.   padding-bottom: 5px;   
  22. }   
  23.   
  24. h2 > a:hover {   
  25.   color: #FFF;   
  26. }    
  27.   
  28. h2 > a:before {   
  29.   content: "";   
  30.   position: absolute;   
  31.   width: 100%;   
  32.   height: 2px;   
  33.   bottom: 0;   
  34.   left: 0;   
  35.   background-color: #FFF;   
  36.   visibility: hidden;   
  37.   -webkit-transform: scaleX(0);   
  38.   transform: scaleX(0);   
  39.   -webkit-transition: all 0.3s ease-in-out 0s;   
  40.   transition: all 0.3s ease-in-out 0s;   
  41. }   
  42.   
  43. h2 > a:hover:before {   
  44.   visibility: visible;   
  45.   -webkit-transform: scaleX(1);   
  46.   transform: scaleX(1);   
  47. }   
  48. style>  
  49. head>  
  50. <body>  
  51.    <h2>  
  52.      <a href="/">悬停在我上面a>  
  53.    h2>  
  54. body>  
  55. html>  
  56.   

创建这种效果是非常简单的，不需要添加额外的DOM元素到HTML，不过需要考虑一下浏览器的兼容性问题，在老旧版本的浏览器中它只会显示为一个普通的下划线。

好了，现在正式开始。我们需要做的第一件事就是去除text-decoration，并设置链接为相对定位。我们需要确保链接在hover时不会改变颜色，这里我们拿h2举例：

CSS Code复制内容到剪贴板
  1. h2 > a {   
  2.       position: relative;   
  3.       color: #000;   
  4.       text-decoration: none;   
  5. }   
  6.   
  7. h2 > a:hover {   
  8.       color: #000;   
  9. }       
  10.   

接下来，我们要添加border，通过变换隐藏它。插入一个:before并且设置它scaleX（0），保守起见，如果浏览器不支持，我们通过visibility: hidden隐藏它。

CSS Code复制内容到剪贴板
  1. h2 > a:before {   
  2.       content: "";   
  3.       position: absolute;   
  4.       width: 100%;   
  5.       height: 2px;   
  6.       bottombottom: 0;   
  7.       left: 0;   
  8.       background-color: #000;   
  9.       visibility: hidden;   
  10.       -webkit-transform: scaleX(0);   
  11.       transform: scaleX(0);   
  12.       -webkit-transition: all 0.3s ease-in-out 0s;   
  13.       transition: all 0.3s ease-in-out 0s;   
  14. }   
  15.   

最后设置动画时间为0.3s，现在我们只需要设置元素在hover时显示并且scaleX(1)：

CSS Code复制内容到剪贴板
  1. h2 > a:hover:before {   
  2.       visibility: visible;   
  3.       -webkit-transform: scaleX(1);   
  4.       transform: scaleX(1);   
  5. }  

大功告成！

这样就完成了一个很有活力的下划线动画。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：css样式图片、渐变、相关小知识(必看)引用css样式的书写格式详解Web前端开发css基础样式总结(推荐)纯CSS3超酷书架样式404页面特效源码HTML CSS样式基础(必看篇)CSS更改鼠标为手状样式对于一些css样式的巧妙方法进行总结(推荐)浅谈CSS样式权值

下一篇：全面了解行内元素与块级元素的区别对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 进一步理解CSS编程中的块级元素和行内元素CSS行内元素和块级元素的居中实例分析

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网