如何在Wordpress中启用Animate.css

Question

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

当我在网站上加载页面时，引用似乎出现在 my 中，但是当我将 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' );

这是一个页面，我在下载图标/图像中添加了“脉冲”类，但它不是脉冲。

Answer 1

在您的function.php

文件中执行以下操作：

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

function load_animate_css() {
  // Load Animate 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="pulse 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/