介绍
鼠标移入的线性样式(底部边框效果)
# 鼠标移入展开效果
- 效果展示
- 效果实现
<span class="my_Exercise_number">线条运动特效</span>
.my_Exercise_number {
position: relative;
font-weight: 400;
cursor: pointer;
&::before {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: $accentColor;
transition: transform 0.5s;
transform: scaleX(0);
// transform-origin: 100% 0;
}
&:hover::before {
transform: scaleX(1);
// transform-origin: 0 0;
}
}
# 鼠标移入平移效果
- 效果展示
- 效果实现
<span class="my_Exercise_number">线条运动特效</span>
.my_Exercise_number {
position: relative;
font-weight: 400;
cursor: pointer;
&::before {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: $accentColor;
transition: transform 0.5s;
transform: scaleX(0);
transform-origin: 100% 0;
}
&:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}
}