php - 如何在 Wordpress 中启用 Animate.css

Question

我已经按照一些说明将 Animate.css 加入队列来自这个 CDN:https://cdnjs.com/libraries/animate.css/ .我引用了第二个选项:https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css在我的 functions.php wordpress 文件中。

当我在我的网站上加载页面时，该引用似乎出现在我的页面中，但是当我将 Animate.css 类添加到图像或 div 时，它不会按预期为元素设置动画。

这是我添加到我的 functions.php 文件中的代码:

function enqueue_my_custom_styles() {
    wp_enqueue_style( 'animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css', false ); 
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_styles' );

Here's a page where I've added the "pulse" class到下载图标/图像，但它没有跳动。

Answer 1

在您的 function.php 文件中执行此操作:

/** * Load Animate CSS from MaxCDN - the right way * */

function load_animate_css() {
  // Load Boostrap CSS
  wp_enqueue_style( 'animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css' );

  // Load Css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

}
add_action( 'wp_enqueue_scripts', 'load_animate_css' );

要使动画工作，请将animated 类添加到pulse 类，如果您希望动画在循环中工作，请添加infinite 类。因此 img 标签将具有以下类。

<img src="" class="pluse infinite animated"/>