如何在 Wordpress 中启用 Animate.css

Question

我已经按照一些说明将 Animate.css from this CDN: https://cdnjs.com/libraries/animate.css/. I referenced the second option: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css 放入我的 functions.php wordpress 文件中。

当我在我的网站上加载页面时，该引用似乎出现在我的页面中，但是当我将 Animate.css class 添加到图像或 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 到下载 icon/image，但它没有脉冲。

Answer 1

问题出在 link 标签

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

Answer 2

在您的 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 class 添加到 pulse class 并且如果您想要动画要在循环中工作，请添加 infinite class。所以 img 标签将有以下 classes .

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

如何在 Wordpress 中启用 Animate.css

How to enable Animate.css in Wordpress

css

php

wordpress

animate.css