好的,以下是一个带有缀色和光照效果的报警列表样式:
```css
.alarm-item {
background-color: #1c3a6e;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.alarm-item:before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 50%);
transform: rotate(45deg);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: rotate(45deg) translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: rotate(45deg) translate(-50%, -50%) scale(1.5);
opacity: 0;
}
}
.alarm-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.alarm-item .title {
font-size: 16px;
font-weight: bold;
color: #