帮我写一个当鼠标进入a时,a标签的下边框由中间向两边变化的代码
时间: 2024-05-01 13:21:58 浏览: 15
好的,以下是一个简单的示例代码:
HTML:
```
<a href="#" class="border-animation">鼠标移入我,我就会有动画效果哦</a>
```
CSS:
```
.border-animation {
position: relative;
display: inline-block;
padding-bottom: 6px;
border-bottom: 2px solid transparent;
transition: border-width 0.3s ease-in-out;
}
.border-animation::before,
.border-animation::after {
content: "";
position: absolute;
bottom: 0;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s ease-in-out;
}
.border-animation::before {
left: 50%;
}
.border-animation::after {
right: 50%;
}
.border-animation:hover {
border-bottom-width: 0;
}
.border-animation:hover::before,
.border-animation:hover::after {
width: 50%;
}
```
当鼠标进入 `.border-animation` 标签时,其下边框会消失,并且左右两端的黑色线条会从中间向两边扩展。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)