纯css竟可以做出边框这样长宽度的过渡效果
时间: 2023-07-25 07:37:15 浏览: 90
是的,CSS确实可以实现长宽度的过渡效果。可以使用CSS3的transition属性和伪类元素来实现。以下是一个示例代码,可以让边框宽度和颜色在鼠标悬停时平滑过渡:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Transition</title>
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid #000;
position: relative;
transition: all 0.3s ease;
}
.box::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
width: 0;
height: 0;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.box:hover {
border-color: #f00;
}
.box:hover::before {
width: 100%;
height: 100%;
border-color: #f00;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
在这个示例中,我们使用一个伪元素来创建一个透明的边框,然后在鼠标悬停时将它的宽度和颜色进行过渡。注意,我们使用了transition属性来指定过渡效果的持续时间和缓动函数。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)