起因：
闲来无事，看到简述我的 “我的主页” 导航栏上很经典的鼠标以上很经典的动画。
记得之前业务上也有要类似动画的时候，但那是用的是jQuery，就直接找了个jQuery的插件。
得闲刚好看到简书这动画，便 f12 看了下代码结构。
最终实现效果：
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.trigger-menu {
border-bottom: 1px solid #f0f0f0;
font-size: 0; /*消除li inline-block 为行内元素后的默认间距*/
list-style: none;
}
.trigger-menu li {
position: relative; /*关键点： 为每个li设置绝对定位*/
display: inline-block; /*使li为块级元素，可以横向排列*/
padding: 8px 0;
border-bottom: 2px solid transparent
}
.trigger-menu li:after { /*hover状态下时的底部横线*/
content: "";
position: absolute; /*关键点： 该元素行对定位于 li*/
left: 50%;
bottom: -2px;
width: 100%;
opacity: 0;
border-bottom: 2px solid #646464;
transform: translate(-50%) scaleX(0);
transition: .2s ease-in-out;
}
.trigger-menu li:hover::after {
opacity: 1;
transform: translate(-50%) scaleX(1);
}
.trigger-menu a {
padding: 13px 20px;
font-size: 15px;
font-weight: 700;
color: #969696;
line-height: 25px;
text-decoration: none;
}
.trigger-menu a:hover {
color: #646464
}
/*点击后添加 .active 样式*/
.trigger-menu li.active{
color: #646464;
border-bottom: 2px solid #646464
}
.trigger-menu li.active a{
color: #646464;
}
</style>
</head>
<body>
<ul class="trigger-menu">
<li><a href="">文章</a></li>
<li><a href="">动态</a></li>
<li><a href="">最新评论</a></li>
<li class="active"><a href="">热门</a></li>
</ul>
</body>
</html>
解析：
-
关键点
利用元素的after伪类创建底部横线。 -
横线怎么刚好定在元素的底部呢？
利用元素间的相对定位来使横线定位到li底部。 li 设置为绝对定位 relative，然后把 after 设置 absolute 相对于li来定位。
bottom: -2px？要使横线刚好在ul底部边框上，因为横线高度为2px，所以横线定在底部然后上移两个像素。
而 left: 50%;transform: translate(-50%); 是让元素位于父级居中。
3.动画是怎么实现的？
如果一开始就让横线展示出来要怎么写？
.trigger-menu li:after {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 100%;
border-bottom: 2px solid #646464;
transform: translate(-50%) scaleX(1); /*原本为scaleX(0)*/
}
这样一开始横线就是出现的。而实例中我们hover时让横线出现的做法是 设置透明度可见和不缩放，如下
.trigger-menu li:hover::after {
transform: translate(-50%) scaleX(1);
}
即一开始横线隐藏了，是因为 scaleX(0)， 把after缩写到0，即视觉上看不见(实际上还是占这那块位置)。而hover时，把 scaleX(1)设为不缩放，即能看到完整的横线。
那么是怎么做到横线由中间向两边延展？就是让横线位于父级居中 “left: 50%; transform: translate(-50%)”
这样就完成了我们所看到的动效了。
网友评论