作者:mobiledu2502858393 | 来源:互联网 | 2023-09-12 04:43
- 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;
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);
这个动画效果 一般都是用在导航或者列表