如何在 Wordpress 中启用 Animate.css

Question

我已按照一些说明从该 CDN：https://cdnjs.com/libraries/animate.css/ 排队 Animate.css。我在 functions.php wordpress 文件中引用了第二个选项：https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css。

当我在我的网站上加载页面时，引用似乎出现在我的页面中，但是当我将 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 文件中执行以下操作：

/** * 从 MaxCDN 加载 Animate CSS - 正确的方式 * */

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"/>

Answer 2

问题在于链接标签

"`<link rel="stylesheet" id="animate-css" href="https://jewelbound.com/wp-content/themes/course-builderhttps://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" type="text/css" media="all">`"

/themes/course-builderhttps://cdnjs.cloudflare.com/