scale等比缩放才能做到看上去能让线条以中心点展开

最新推荐文章于 2024-08-18 20:44:12 发布

weixin_34255055

最新推荐文章于 2024-08-18 20:44:12 发布

阅读量374

点赞数

本文介绍了一种使用CSS伪元素::before实现的鼠标悬停动画效果。通过对a标签的::before伪元素进行样式设置，实现了当鼠标悬停在链接上时下方出现一条逐渐展开的线条效果。文章详细解释了如何通过transform属性的scale变化来实现动画。

.nav-menu>ul>li>a::before {
background: #333 none repeat scroll 0 0;
bottom: -2px;
content: "";
height: 2px;
position: absolute;//注意a一定得是relation相对定位才行，::before可以看做是a的子元素，a是父元素
left:-1px;//适当的调整一下子元素::before和父元素a的对齐距离
width: 100%;//这一点很重要，宽度100%就能继承a的宽度，否则怎么设置都会很突兀
-webkit-transform:scale(0);
transform:scale(0);
-webkit-transition:all .5s ease 0s;
transition:all .6s ease 0s;
}

.nav-menu>ul>li>a:hover::before{//a滑过时::before伪类的效果
// animation:underline1 0.5s ease 0s normal forwords 1 runing ;//forwords让动画停留在最后的状态后面的1是指只循环一次
// background: #333 none repeat scroll 0 0;
// bottom: -2px;
// content: "";
// height: 2px;
// position: absolute;
transform:scale(1);//只用这一句就够了
}