鼠标点击按钮,按钮发出天蓝色的光,并在周围产生光晕
时间: 2024-02-28 11:54:19 浏览: 80
实现这个效果可以使用CSS3的伪元素和animation属性来实现。
首先,我们可以创建一个光晕的伪元素,并设置其初始状态为透明。然后,在按钮被点击时,使用animation属性让光晕逐渐变为不透明,并在一段时间后消失。
以下是示例代码:
```html
<button class="btn">点击我</button>
```
```css
.btn {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.btn::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
opacity: 0;
background-color: rgba(0, 191, 255, 0.4);
z-index: -1;
}
.btn:active::before {
animation: halo 1s ease-out;
}
@keyframes halo {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
```
在上面的代码中,我们使用::before伪元素来创建光晕,并在按钮被点击时,使用animation属性让光晕逐渐变为不透明,并在一段时间后消失。注意,我们使用了z-index属性将光晕置于按钮的后面,以避免遮挡按钮的内容。
你可以根据需要调整光晕的大小、颜色和动画效果,以实现你想要的效果。
相关推荐
![](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)