以下是一个 HTML + CSS 的漂亮公告框代码，它不仅具备现代的设计感，还有动感的动画效果，适合用作网站的公告展示。

HTML 和 CSS 公告框代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
        }

        /* 公告框样式 */
        .announcement-box {
            width: 80%;
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background-color: #ffffff;
            border-left: 5px solid #4CAF50;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            animation: slideIn 1s ease-out;
        }

        /* 公告框标题 */
        .announcement-box h2 {
            margin: 0;
            padding-bottom: 10px;
            font-size: 24px;
            color: #4CAF50;
            font-weight: bold;
        }

        /* 公告框内容 */
        .announcement-box p {
            line-height: 1.6;
            font-size: 16px;
            color: #333;
        }

        /* 关闭按钮样式 */
        .announcement-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #ff4d4d;
            color: white;
            border: none;
            padding: 5px 10px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .announcement-close:hover {
            background-color: #e03c3c;
        }

        /* 滑动动画 */
        @keyframes slideIn {
            0% {
                transform: translateY(-100%);
                opacity: 0;
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

    </style>
</head>
<body>

    <div class="announcement-box">
        <button class="announcement-close" onclick="closeAnnouncement()">X</button>
        <h2>重要公告</h2>
        <p>亲爱的用户，我们将于2025年8月1日起进行系统维护，预计会影响部分功能的正常使用。请各位用户提前做好相关准备，如有疑问，请联系在线客服。</p>
    </div>

    <script>
        // 关闭公告框的函数
        function closeAnnouncement() {
            document.querySelector('.announcement-box').style.display = 'none';
        }
    </script>

</body>
</html>

说明：

  1. 公告框：使用了 box-shadow 来给公告框添加阴影效果，border-left 使左侧边框具有绿色的标识，增加视觉效果。
  2. 标题：标题部分使用了绿色的字体颜色，显得醒目。
  3. 关闭按钮：右上角有一个红色的 X 按钮，用户可以点击关闭公告框。按钮有简单的 hover 效果。
  4. 动画效果：公告框在加载时通过 slideIn 动画效果从顶部滑入，增加动态感。
  5. 响应式设计：公告框的宽度设置为 80%，最大宽度为 600px，在大部分设备上都能很好地适配。

功能：

  • 公告内容：可以根据需要编辑公告的标题和正文内容。
  • 关闭按钮：点击右上角的 X 按钮即可隐藏公告框，适合用于临时的通知。
  • 动画效果：公告框在页面加载时会有一个从顶部滑入的动画效果，使其更吸引注意力。

可自定义：

  • 颜色：可以修改公告框的背景颜色、标题颜色、按钮颜色等，来匹配你的网站风格。
  • 尺寸：可以调整公告框的宽度、字体大小等参数。
  • 动画：可以修改或替换 slideIn 动画，设置其他进场动画。

这个公告框不仅功能完备，而且视觉上也非常清晰和现代，适合用在任何需要展示公告信息的网页上。