bootstrap使用动画

boorstrap使用动画一般需要两个配合( wow.js 库   aimate.css库)

1.下载wow.js(   网址:https://github.com/matthieua/WOW/blob/master/dist/wow.min.js)

    下载过后把wow.js文件放在自己建立的wow文件夹下,并引用

2.在body里面加上下面的js代码


3.下载animate.css ( 网址:https://raw.githubusercontent.com/daneden/animate.css/master/animate.min.css)

    下载过后把css文件放在自己建立的animate的文件夹下,并引用外部样式

4.在你想要加动画的标签上加入样式

“wow  动画样式”,这两个样式必须加

动画样式如下:(根据自己的需要添加,如果需要一直循环播放,则在动画样式后面加上infinite)

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

完整的一个例子:




    
    
    
    使用bootstrap动画
    
    
    


    
    
    
    
    
    


bootstrap使用动画_第1张图片


你可能感兴趣的:(bootstrap使用动画)