欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

animate.css用法

程序员文章站 2022-03-16 20:55:30
...

动效预览地址:
https://daneden.github.io/animate.css/

动效css地址:
https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

  1. 建立animate.css文件并引入
<head>
    <link rel="stylesheet" href="css/animate.css">
    <!-- 内容放在css文件夹下 -->
</head>
  1. 给指定元素加入class"animated <动效名称>"
<div class="animated bounce"></div>
  1. 如果需要无限做动画, 添加 infinite 类名即可
<div class="animated bounce infinite"></div>
  1. 在JS中可以通过事件监听,改变元素className来触发动效
<event>.addEventListener("click", function(){
      <event2>.className = "animated bounce";
}

转载于:https://www.jianshu.com/p/ff779521086d