CSS3绘制有活力的链接下划线


Posted in HTML / CSS onJuly 14, 2016

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="gb2312">  
  5.   <meta name="viewport" content="width=device-width">  
  6.   <title>JS Bin</title>  
  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.       positionrelative;   
  3.       color#000;   
  4.       text-decorationnone;   
  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.       positionabsolute;   
  4.       width: 100%;   
  5.       height2px;   
  6.       bottombottom: 0;   
  7.       left: 0;   
  8.       background-color#000;   
  9.       visibilityhidden;   
  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.       visibilityvisible;   
  3.       -webkit-transform: scaleX(1);   
  4.       transform: scaleX(1);   
  5. }  

大功告成!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 HTML / CSS
自定义html标记替换html5新增元素
Oct 17 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
CSS3实现时间轴效果
Jul 11 #HTML / CSS
CSS3实现10种Loading效果
Jul 11 #HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 #HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
You might like
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
win10 64bit下python NLTK安装教程
2018/09/19 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
介绍一下linux文件系统分配策略
2012/11/17 面试题
大学生冰淇淋店商业计划书
2014/01/14 职场文书
教师新年寄语
2014/04/03 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
交通事故案件代理词
2015/05/23 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
Android自定义双向滑动控件
2022/04/19 Java/Android
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技