css制作进度条下划线-经过时过渡到100,松开时过渡到0

来源：互联网发布：计算面积的软件编辑：程序博客网时间：2024/06/05 07:53

效果描述：

1.打开页面时。标题下方没有下划线。

2.鼠标经过标题时。由0%过渡出现下划线至100%。

3.鼠标离开标题时。下划线由100%以过度的效果消失至0%。

（做出来的效果还是挺炫的，有进度条的效果）

用到的标签（CSS）:

a.动画效果：animation:;

animation:动画名称（引用）动画时间运动曲线开始时间播放次数是否反方向;

定义动画：

@keyframes 动画名称 {from{}//from == 0%to{}//to == 100%}

b.添加伪元素： ::after

c.定位：子绝父相（子元素添加position:absolute; 父元素添加position:relative;）

代码部分：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>a {text-decoration: none; /*消除链接下划线*/}.mnue-tit span {position: relative;display: inline-block; /*转换成行内块元素*/line-height: 20px;  /*垂直居中*/font-size: 16px;color: orange;}.mnue .mnue-tit:hover span::after {    /*鼠标经过mune-tit的时候 在span后面添加伪元素*/content: "";display: block;width: 100%;height: 2px;position: absolute;left: 0px;bottom: 0;/*==top: 30px;*/ /*用定位的方法设置下划线与标题的距离*/background: #56d1ec;-webkit-animation: lineIn 0.5s forwards;/* Safari 和 Chrome */animation: lineIn 0.5s forwards;-moz-animation: lineIn 0.5s forwards;/* Firefox */-o-animation: lineIn 0.5s forwards;/* Opera */z-index: 10;}span::after {content: "";display: block;width: 0px;height: 2px;position: absolute;left: 0;top: 30px;background: #56d1ec;animation: lineOff 0.5s forwards;-moz-animation: lineOff 0.5s forwards;/* Firefox */-o-animation: lineOff 0.5s forwards;/* Opera */-webkit-animation: lineOff 0.5s forwards;/* Safari 和 Chrome */z-index: 10;}/*--------------------------开始------------------------------*/@keyframes lineIn {from {width: 0;}to {width: 100%;}}/*适应于火狐浏览器*/@-moz-keyframes lineIn {from {width: 0;}to {width: 100%;}}/*适应于Opera（欧朋）浏览器*/@-o-keyframes lineIn {from {width: 0;}to {width: 100%;}}/*适应于谷歌浏览器*/@-webkit-keyframes lineIn {from {width: 0;}to {width: 100%;}}/*---------------------------退回------------------------------*/@keyframes lineOff {from {width: 100%;}to {width: 0;}}@-moz-keyframes lineOff {from {width: 100%;}to {width: 0;}}@-o-keyframes lineOff {from {width: 100%;}to {width: 0;}}@-webkit-keyframes lineOff {from {width: 100%;}to {width: 0;}}</style></head><body><div class="mnue"><div class="mnue-tit"><a href="#"><span>Partners</span></a></div></div></body></html>

效果就可以看到了。
-----------------------------------------------------------------------END----------------------------------------------------------------------------

阅读全文

0 0