弹窗美化-国庆节祝贺-记录

国庆节翩然而至，这是伟大祖国母亲的光辉节日，更是我们每一个中华儿女共同欢庆的盛大节日。在这样特殊的时刻，怎么能不给我们的网站精心装扮一番呢？比如添加一些独具特色的弹窗装饰，让网站也能洋溢着国庆的喜庆氛围。嘿嘿，光是想想就觉得很有意义呢！

效果预览：

代码-不包括弹窗的执行逻辑：

<style>
/* 弹窗的整体样式 */
.custom-popup {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* 鲜艳的橙红色渐变，增加节日氛围 */
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3); /* 增加阴影，提升立体感 */
    color: #fff;
    font-family: 'Arial', sans-serif;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    max-width: 500px;
    margin: 50px auto; /* 为弹窗增加顶部和底部空间 */
    position: relative;
    overflow: hidden;
}

/* 标题样式 */
.custom-popup h2 {
    color: #ffd700; /* 金色象征荣耀 */
    font-size: 26px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* 为标题增加阴影 */
    margin-bottom: 20px;
}

/* 祝福内容样式 */
.custom-popup p {
    font-size: 18px;
    margin-bottom: 20px;
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 提高可读性 */
}

/* 列表的样式 */
.custom-popup ul {
    list-style-type: none;
    padding: 0;
    text-align: left;
}

.custom-popup li {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    padding-left: 20px;
}

/* 列表项前的图标 */
.custom-popup li::before {
    content: "★";
    color: #ffd700;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 0;
}

/* 图片样式 */
.custom-popup img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); /* 图片阴影效果 */
}

/* 弹入效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 移动设备适配 */
@media (max-width: 768px) {
    .custom-popup {
        padding: 20px;
    }
    .custom-popup h2 {
        font-size: 22px;
    }
    .custom-popup p, .custom-popup li {
        font-size: 15px;
    }
}
</style>

<div class="custom-popup">
    <h2>国庆节快乐！</h2>
    <p>今年是第75周年国庆节，祝大家国庆节快乐！</p>
    <ul>
        <li>祝愿祖国和平长久，繁荣昌盛。</li>
        <li>祖国，您让咱们挺起腰杆，咱们为您添砖加瓦。</li>
        <li>没有国，哪有家；没有家，哪有你我。让我们共同祝愿国兴家和！</li>
        <li>祖国风雨数十载，开创美好新时代。中华全民齐奋进，追求卓越创辉煌。</li>
    </ul>
    <img src="https://cn-sy1.rains3.com/joyb.cc/2024/10/20241001105655964-75%E5%91%A8%E5%B9%B4%E5%9B%BD%E5%BA%86%E5%BF%AB%E4%B9%90.png" alt="国庆节庆祝图片">
</div>