Animate.css的使用

最新推荐文章于 2024-08-07 15:34:36 发布

科罗拉多

最新推荐文章于 2024-08-07 15:34:36 发布

阅读量1.3k

点赞数 1

文章标签： css html5 html

本文链接：https://blog.csdn.net/guo_2019/article/details/119915733

版权

Animate.css的使用

1. 官网 https://animate.style/
2. 常见的几种引入方式，官网都给出了
在这里插入图片描述
3. 如何使用
瓜皮式操作ing：animate.css的使用很简单，它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animate__animated 和相应的类添加到元素上就行了，找到你想要的动画，类名在官网上直接粘贴过来，效果就有了：
在这里插入图片描述

4. 小demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./animate.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
                                
    <style>
        .box{height: 100px;width: 100px;background-color: rgb(0, 191, 255)}
    </style>
</head>
<body>
    <div class="box animate__animated animate__backInDown"></div>
</body>
</html>

科罗拉多

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
Animate.css的使用

Animate.css的使用1. 官网 https://animate.style/2. 常见的几种引入方式，官网都给出了3. 如何使用animate.css的使用很简单，它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类 animate__animated 和相应的类添加到元素上就行了，找到你想要的动画，类名在官网上直接粘贴过来，效果就有了：4. 小demo:<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫