1. Introducción
Ayúdenos a lograr algunos efectos de animación en la página, como agitar, parpadear, rebotar, voltear, rotar (rotar hacia adentro/rotar hacia afuera), desvanecerse/desvanecerse, etc. No necesitamos escribir código jq nosotros mismos, la biblioteca está encapsulada, solo necesitamos hacer referencia a ella y llamarla, lo que reduce en gran medida nuestra carga de trabajo.
2. Obtener la dirección
Sitio web oficial: http://www.animate.net.cn/
Dirección de descarga del archivo (cómo usarlo a continuación): https://www.dowebok.com/98.html
Ver el efecto (esto es genial, haga clic para copiar ): https://animate.style/
3. Exhibición del caso
1. Visualización de la estructura del directorio:
2. Código:
<!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>
<script src="./js/jQuery.min.js"></script>
<link rel="stylesheet" href="./css/animate.min.css">
</head>
<body>
<div id="dowebok">
测试
</div>
<script>
$(function() {
$('#dowebok').click(function() {
$(this).addClass('animated flipOutX'); //这个animated是必须要写的，不写不生效。
setTimeout(function() {
//完成此动画之后，把动画类名移除掉，这样再点击又能添加类名，执行动画。
$('#dowebok').removeClass('animated flipOutX');
}, 1000);
})
});
</script>
</body>
</html>
3. Visualización del efecto (en este momento se activa al hacer clic)
4. Si desea que la animación se muestre en un bucle infinito de forma predeterminada, solo necesita agregar un nombre de clase: infinite.
Código:
<!-- 第一个类名是必写参数、第二个类名是动画名称（此时是抖动）、第三个类名控制无限循环。 -->
<div id="dowebok" class="animated shake infinite">
测试
</div>
Demostración de efectos:
4. Resumen
- Todo el contenido está en el sitio web oficial y puedes explorarlo tú mismo.
- La animación solo necesita introducir animate.min.css. Si desea usar jq para controlar elementos más adelante, debe introducir jq.min.js.
- El bucle infinito necesita agregar el nombre de la clase:
infinite.