html特效

作者：紛手也是一茽の媄丽发布日期:2025-03-14 浏览:319

<!DOCTYPE html>
<html>
<head>
    <title>HTML 特效示例</title>
    <style>
        /* 简单的 CSS 动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in {
            animation: fadeIn 2s ease-in-out;
        }
    </style>
</head>
<body>
    <!-- 文字淡入特效 -->
    <h1 class="fade-in">欢迎来到 HTML 特效世界</h1>

    <script>
        // JavaScript 实现点击按钮后改变背景颜色
        function changeBackgroundColor() {
            document.body.style.backgroundColor = getRandomColor();
        }

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>

    <!-- 按钮触发背景颜色变化 -->
    <button onclick="changeBackgroundColor()">点击改变背景颜色</button>
</body>
</html>

解释说明：

CSS 动画：
- 使用 @keyframes 定义了一个名为 fadeIn 的动画，从透明度为 0 到透明度为 1。
- 在 <h1> 标签中应用了 fade-in 类，使得文字在页面加载时有淡入的效果。
JavaScript 交互：
- 定义了一个 changeBackgroundColor 函数，当用户点击按钮时，会调用该函数来随机改变页面的背景颜色。
- getRandomColor 函数生成一个随机的十六进制颜色值，并将其应用于页面背景。

这个示例展示了如何结合 CSS 和 JavaScript 来创建简单的 HTML 特效。

上一篇：html合并单元格

下一篇：html的注释