animate.css的使用方法动画库万能调用代码

发布时间:2019-02-28 18:49:19 来源:青锋建站 作者:青锋建站
  animate.css动画库,预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果。几乎包含了所有常见的动画效果,但在使用上与我们一般的实际项目有些出入,如果达到我们想要的效果需要添加JS代码来配合实现。我们在网站建设上使用animate.css动画库的情况是:当鼠标滑过某一DIV时,内部相应的模块执行动画播放。为此青锋建站专业开发了JS调用animate.css动画库的万能调用代码,使用非常方便,不需要JS开发能力也可以方便使用,但是只适用于鼠标滑过时,内部执行动画。

animate.css动画库万能调用代码介绍

  animate.css动画库万能调用代码可以实现当模块滑过某一DIV或块时,内部相应的设置有动画类名的标签执行动画。只需要添加CSS类名,不需要JS开发。由青锋建站前端开发团队设计功能,免费开发给大家,只需要关注青锋建站的百度熊掌号就可以免费获取代码。
animate.css动画库万能调用代码下载地址animate.css万能调用代码,下载码获取方式:
方式一:百度搜索“青锋建站”-找到青锋建站的熊掌号,关注后-在文本输入框中输入:(animate.css动画库万能调用代码)即可获得下载码。
方式二:从文章正文开始和结构来关注青锋建站的通掌号关注后通过输入关键词同样可以获取下载码。

animate.css万能调用代码使用方法

  animate.css万能调用代码傅非常简单,只需要给外层标签添加类名(.qingfengjianzhan),再给内部标签添加以动画名称为名称的CSS类名就可以。例如:以下示例代码就可以实现相应的功能,当鼠标滑过<div class="qingfengjianzhan">时,里面的动画就会触发执行。
  <div class="qingfengjianzhan">
    <div class="slideInLeft">
    </div>
    <div class="slideInRight">
    </div>
  </div>
  
  !注意:当然您下载的animate.css是我们改造过的,如果使用自己的animate.css,需要做一些改变。改变的方法就是将里面所有以动画名称为类名的CSS样式中将下列部分(-webkit-animation-name:动画名称;animation-name:动画名称)去掉就可以。

animate.css万能调用代码扩展

  本代码内置了几种动画而已,如果想把所有动画都使用将会消耗一部分系统开销,当然大家可以自己添加,方法非常简简,如下:
  var tarAnimated=new Array("bounce","pulse_half","slideInLeft","slideInRight","slideInUp","slideInDown");
  以数据的方式来列出本页面要使用的动画名称,如果想再添加两个动画(bounce和flash)需要把上面一名JS代码改成如下即可。
  var tarAnimated=new Array("bounce","pulse_half","slideInLeft","slideInRight","slideInUp","slideInDown","bounce","flash");
分享到:

Copyright © 2016-2026 青锋建站 版权所有