Code:

<h2>提示信息</h2>
<p>点击 "x" 关闭提示框。</p>
<div class="alert">
    <span class="closebtn">&times;</span>
    <strong>危险!</strong> 危险操作提示。
</div>

<div class="alert success">
    <span class="closebtn">&times;</span>
    <strong>成功!</strong> 操作成功提示。
</div>

<div class="alert info">
    <span class="closebtn">&times;</span>
    <strong>提示!</strong> 提示信息修改等。
</div>

<div class="alert warning">
    <span class="closebtn">&times;</span>
    <strong>警告!</strong> 提示当前操作要注意。
</div>
<style>
    .alert {
        padding: 20px;
        background-color: #f44336;
        color: white;
        opacity: 1;
        transition: opacity 0.6s;
        margin-bottom: 15px;
    }
    
    .alert.success {background-color: #4CAF50;}
    .alert.info {background-color: #2196F3;}
    .alert.warning {background-color: #ff9800;}
    
    .closebtn {
        margin-left: 15px;
        color: white;
        font-weight: bold;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
        transition: 0.3s;
    }
    
    .closebtn:hover {
        color: black;
    }
</style>

1000bd Online Code Preview

Code:

Run Result：