css 底部边框动画 |css 好看网站导航

.box {
border-bottom: 3px solid #42B983;  /* 设置边框样式以及颜色  */
position: relative;   /* 设置元素的相对定位  */
}
.box::after {  /* 使用伪元素，为元素添加动画效果  */
content: "";  /* 声明伪元素 */
position: absolute; /* 将伪元素设置为绝对定位  */
bottom: 0;  /* 将伪元素放在元素的底部  */
left: 0;  /* 将伪元素放在元素的最左侧  */
width: 100%;  /* 伪元素的宽度与元素保持一致  */
height: 3px;  /* 伪元素的高度  */
background-color: #42B983;  /* 设置伪元素的背景颜色  */
transform-origin: left top;  /* 设置变换的原点位置  */
transform: scaleX(0);  /* 将伪元素水平缩放至0  */
transition: transform 0.5s ease-in-out;  /* 设置变换的时长、效果及时间函数  */
}
.box:hover::after {  /* 鼠标移动至元素上方时，出现动画效果  */
transform: scaleX(1);  /* 伪元素水平缩放至1  */
}

在上面的示例中，大家将一个元素的底部边框设置为一个固定的宽度和颜色。接着，大家使用伪元素为元素添加了一个底部的“背景”，并使用CSS的transform属性把它从左到右进行缩放，从而实现了底部边框出现的动画效果。

在这个例子中，大家使用了一个scaleX()函数，它可以使元素水平进行缩放。将scaleX()设置为0时，元素会被缩小为0宽，隐藏的元素大小为0时，视觉上无法被观察者看见。当移动到元素上时，大家将scaleX()缩放至1，这样便可以产生逐渐透明的过程，以此吸引用户的视线，并增加动感。

最后只需要使用:hover伪类，触发元素的动画效果。当鼠标移动到元素上时，就可以看到底部边框的动画效果。