css3a标签⽤伪类写下划线动画效果
1. before在a标签之前的横线动画
从左往右动画效果
html代码：
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>
css样式：
ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color:#ed6d00;
content: "";
transform:scale3d(0, 1, 1);
transform-origin: left;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform:scale3d(1, 1, 1);
color:#ed6d00;
}
从中间两边扩散动画效果
html代码：
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>
css样式：
ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color:#ed6d00;
content: "";
transform:scale3d(0, 1, 1);
transform-origin: center;
transition: all 0.5s;
}
ul>li:hover>a:before{
transform:scale3d(1, 1, 1);
color:#ed6d00;
}
从右往左动画效果
html代码：
<ul>
<li><a href="">哈哈</a></li>
<li><a href="">嘿嘿</a></li>
<li><a href="">啊啊</a></li>
<li><a href="">下划线</a></li>
</ul>
css样式：
ul>li>a:before{
position: absolute;
z-index: 1;
left: 0px;
bottom: 0px;
display: inline-block;
height: 3px;
width: 100%;
background-color:#ed6d00;
content: "";
transform:scale3d(0, 1, 1);
transform-origin: right;
href标签怎么用
transition: all 0.5s;
}
ul>li:hover>a:before{
transform:scale3d(1, 1, 1);
color:#ed6d00;
}
需要改变动画⽅向参数
transform-origin: right;//center left  right 三种动画⽅向
transform: scale3d(0, 1, 1);//第⼀个参数表⽰长度的百分⽐第⼆个参数⾼度的百分⽐这个动画效果 ⼀般都是⽤在导航或者列表

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。