一个蓝色按钮 本身的宽度在20% 鼠标触碰的时候动画的形式 宽度到40%并且将子内容.box_left_r_icon显示 鼠标离开的时候再将.box_left_r_icon隐藏并且宽度恢复如初
时间: 2024-02-03 09:11:16 浏览: 28
可以使用CSS中的:hover选择器和transition属性来实现这个效果。具体的代码如下:
HTML代码:
```
<button class="blue-btn">
<span class="btn-text">按钮</span>
<span class="box_left_r_icon">图标</span>
</button>
```
CSS代码:
```
.blue-btn {
width: 20%;
height: 40px;
background-color: blue;
color: white;
border: none;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.blue-btn:hover {
width: 40%;
}
.blue-btn .btn-text {
display: inline-block;
padding: 10px;
box-sizing: border-box;
}
.blue-btn .box_left_r_icon {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background-color: white;
display: none;
transition: width 0.5s ease-in-out;
}
.blue-btn:hover .box_left_r_icon {
width: 30%;
display: block;
}
.blue-btn:hover .btn-text {
padding-right: 30%;
transition: padding-right 0.5s ease-in-out;
}
.blue-btn:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: -1;
}
.blue-btn:hover::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
z-index: -2;
}
.blue-btn:hover .btn-text::before {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 30%;
height: 1px;
background-color: white;
z-index: 1;
}
```
这段代码使用了伪元素、过渡动画和位置属性等CSS技巧,实现了按钮宽度变化和子元素显示隐藏的效果。其中,使用:hover选择器触发动画效果,使用transition属性控制过渡动画的时间和方式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)