animate css

作者：农村混血兒发布日期:2025-08-29 浏览:45

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animate CSS Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
<body>
    <h1 class="animate__animated animate__bounce">Hello, World!</h1>

    <style>
        /* Optional: Add some basic styling */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
    </style>
</body>
</html>

解释说明：

引入 Animate.css：通过 <link> 标签引入了 Animate.css 的 CDN 链接，这样可以直接使用 Animate.css 提供的动画类。
应用动画类：在 <h1> 标签上添加了两个类 animate__animated 和 animate__bounce。animate__animated 是必需的基础类，animate__bounce 是具体的动画效果类，表示元素会弹跳出现。
样式调整：通过内联 <style> 标签对页面进行了简单的布局调整，使文本居中显示，并设置了背景颜色。

如果你需要更多的动画效果，可以参考 Animate.css 官方文档。

上一篇：css滚动条

下一篇：css 绝对定位