带 Flash 警报的入门 CSS 框

这是一个入门级别的CSS框，它可以用于展示重要的提示信息或警告信息。它带有一个闪烁的红色框，以吸引用户的注意力。

如何使用

HTML 代码

<div class="flash-alert">This is a flash alert message!</div>

CSS 代码

.flash-alert {
  border: 2px solid red;
  padding: 10px;
  border-radius: 5px;
  animation: flash 1s infinite;
}

@keyframes flash {
  0% {
    border-color: red;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: red;
  }
}

解释说明

• border：在框内放置红色边框。
• padding：为文本设置内边距。
• border-radius：将边框的两个角度设置为圆形。
• animation：为元素设置动画。
• @keyframes：创建动画效果。

效果展示

总结

这个CSS框非常简单，但它可以为你的网站提供很好的视觉效果。当你需要快速创建一个警告框时，它是非常有用的。