css 中 光泽一闪而过的代码实现
时间: 2024-01-07 13:07:10 浏览: 31
可以使用CSS3中的transition和animation属性来实现光泽一闪而过的效果。下面是一个示例代码:
```html
<div class="shine">Hover Me</div>
```
```css
.shine {
display: inline-block;
padding: 10px;
background-color: #f7f7f7;
color: #333;
position: relative;
}
.shine::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.shine:hover::before {
opacity: 1;
animation: shine 1s ease-in-out forwards;
}
@keyframes shine {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
```
以上代码实现了一个在鼠标悬停时,会出现一道光泽的效果。其中使用了::before伪元素来创建光泽的效果,使用了transition属性来实现渐变的效果,使用了animation属性来实现光泽消失的效果。