animate.css动画库
使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画（官网：https://animate.style/）
// 安装 npm install animate.css （npm安装） https://unpkg.com/animate.css@3.5.2/animate.min.css（在线cdn） // 使用 // 想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上 // 因为它是把不同的动画绑定到了不同的类里 <div class="animated bounce"></div>
完整代码示例（通过js添加或移除动画效果）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css"> <style> .box{
height: 100px;
width: 100px;
background-color: lightblue
} </style> </head>
<body> <button id="btn1">添加</button> <button id="btn2">移除</button> <div id="box" class="box"></div> <script> var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBox = document.getElementById('box'); oBtn1.onclick = function(){ oBox.classList.add('animated'); oBox.classList.add('flash'); } oBtn2.onclick = function(){ oBox.classList.remove('flash'); } </script> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人