Animate.css介绍

2018-06-24 02:22:58来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

Animate.css简介

animate.css 动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

Animate.css下载

百度云盘下载链接

Animate.css动画演示

演示地址

Animate模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 引用animate文件 -->
  <link rel="stylesheet" href="css/animate.min.css"/>
</head>
<body>

</body>
</html>
  • 添加一个动画
<!-- animated类似与全局变量,定义动画持续时间 -->
<!-- bounce具体动画的名称 -->
<div class="animated bounce">
  Animate.css
</div>
  • 定义播放次数
<!-- infinite定义动画无限播放 -->
<div class="animated bounce infinite">
  Animate.css
</div>
  • 通过JavaScript或jQuery添加Animate动画
<div>
  Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过jQuery添加animate动画 -->
<script>
   $('div').addClass('animated bounce');
</script>
  •  添加定时器,5秒后删除animate无限播放效果
<div>
  Animate.css
</div>
<!-- 在线引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通过JavaScript或jQuery添加animate动画 -->
<script>
   $('div').addClass('animated bounce infinite');
   setTimeout(function(){
     $("div").removeClass("infinite");
   },5000)
</script>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:新编html网页设计从入门到精通 (龙马工作室) pdf扫描版?

下一篇:用HTML编写阿里云