搜集翻译了一些下划线的动态效果,感觉可能什么时候会用,这里贴一下~请使用现代浏览器查看效果。
主要就是使用了CSS的:after伪类,再加上一些transition动画效果,设置设置宽度高度,左右距离好像就完事儿了……
鼠标放上去,你会发现下划线“生长”出来了,不过页面所有的内容也往下走了3像素,这样视觉效果不是很好,你可以将它设置一下绝对定位(就好像下面的那个例子)或者用一个固定高度的容器包裹一下它。
.sliding-u-t-b {
display: inline-block;
}
.sliding-u-t-b:after {
content: '';
display: block;
height: 0;
width: 100%;
background: transparent;
transition: height .5s ease, background-color .5s ease;
}
.sliding-u-t-b:hover:after {
height: 3px;
background: blue;
}
这个就是使用绝对定位的效果。
.sliding-u-b-t {
display: inline-block;
position: relative;
}
.sliding-u-b-t:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 100%;
background: transparent;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.sliding-u-b-t:hover:after {
height: 3px;
background: blue;
}
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}
.sliding-u-r-l {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-r-l:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-r-l:hover:after {
width: 100%;
background: blue;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
background: blue;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
width: 100%;
background: blue;
}
.sliding-u-l-r-l {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width 0s ease, background .5s ease;
}
.sliding-u-l-r-l:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: blue;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:before {
width: 100%;
background: blue;
transition: width .5s ease;
}
.sliding-u-l-r-l:hover:after {
width: 100%;
background: transparent;
transition: all 0s ease;
}
.sliding-u-l-r-l-inverse {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-u-l-r-l-inverse:before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
transition: width 0s ease;
}
.sliding-u-l-r-l-inverse:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 100%;
background: blue;
transition: width .5s ease;
}
.sliding-u-l-r-l-inverse:hover:before {
width: 0%;
background: blue;
transition: width .5s ease;
}
.sliding-u-l-r-l-inverse:hover:after {
width: 0%;
background: transparent;
transition: width 0s ease;
}