html炫酷特效代码

作者：__龙泉丶聂风发布日期:2026-05-11 浏览:65

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫酷特效示例</title>
    <style>
        /* 简单的 CSS3 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #ff6f61;
            margin: 50px auto;
            animation: fadeIn 2s ease-in-out;
        }
    </style>
</head>
<body>
    <!-- 简单的动画盒子 -->
    <div class="box"></div>

    <script>
        // 简单的 JavaScript 点击事件特效
        document.querySelector('.box').addEventListener('click', function() {
            this.style.backgroundColor = '#6b5b95';
            this.style.transform = 'rotate(360deg)';
            this.style.transition = 'all 0.5s ease';
        });
    </script>
</body>
</html>

解释说明：

HTML 部分:
- 创建了一个简单的 div 元素，类名为 box，用于展示动画效果。
CSS 部分:
- 使用了 @keyframes 定义了一个名为 fadeIn 的动画，从透明到不透明。
- .box 类应用了这个动画，并设置了宽度、高度、背景颜色和居中显示。
JavaScript 部分:
- 添加了一个点击事件监听器，当用户点击 box 时，背景颜色会改变，并且盒子会旋转一圈，同时应用了平滑的过渡效果。

这个例子展示了如何使用 HTML、CSS 和 JavaScript 来创建一个简单的炫酷特效。

上一篇：html 富文本

下一篇：html option