滑动监听高度执行css3动画特效_css匀速动画资源-CSDN文库

共8个文件

js：4个

html：2个

css：2个

需积分: 25 68 浏览量 2022-06-22 16:49:24 上传评论收藏 47KB RAR 举报

资源详情

资源评论

资源推荐

收起资源包目录

滑动监听高度执行动画.rar （8个子文件）

滑动监听高度执行动画

jquery.waypoints.js 17KB

jquery-1.12.3.min.js 95KB

index.html 10KB

aniTest.css 996B

jquery.waypoints.min.js 9KB

jquery.gao.js 1KB

animate.css 77KB

index11.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3动画特效</title> <link rel="stylesheet" type="text/css" href="animate.css"> <link rel="stylesheet" type="text/css" href="aniTest.css"> </head> <body> <div class="containView"> <text id="animationType" class='animated bounce'>CSS3动画特效</text> </div> <div class='aniDes'><text id="animationNamez">当前的动画类型：bounce</text></div> <input id="animationName" type="hidden" value="bounce"> <checkbox-group bindchange="checkboxChange"> <label class='boxlabel'><input style="width:26px; height:26px;" id="box" onClick="onbox()" type="checkbox" value="false"><checkbox>循环</checkbox></label> </checkbox-group> <button class='btn' onClick="ondianji()" bindtap='clickBtn'>开始动画</button> <scroll-div scroll-y catchtap='clickAniBtn' class='scrollView'> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Attention Seekers</text> <button onClick="ondianz(this)" data-btnName="bounce">bounce</button> <button onClick="ondianz(this)" data-btnName="flash">flash</button> <button onClick="ondianz(this)" data-btnName="pulse">pulse</button> <button onClick="ondianz(this)" data-btnName="rubberBand">rubberBand</button> <button onClick="ondianz(this)" data-btnName="shake">shake</button> <button onClick="ondianz(this)" data-btnName="swing">swing</button> <button onClick="ondianz(this)" data-btnName="tada">tada</button> <button onClick="ondianz(this)" data-btnName="wobble">wobble</button> <button onClick="ondianz(this)" data-btnName="jello">jello</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Bouncing Entrances</text> <button onClick="ondianz(this)" data-btnName="bounceIn">bounceIn</button> <button onClick="ondianz(this)" data-btnName="bounceInDown">bounceInDown</button> <button onClick="ondianz(this)" data-btnName="bounceInLeft">bounceInLeft</button> <button onClick="ondianz(this)" data-btnName="bounceInRight">bounceInRight</button> <button onClick="ondianz(this)" data-btnName="bounceInUp">bounceInUp</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Bouncing Exits</text> <button onClick="ondianz(this)" data-btnName="bounceOut">bounceOut</button> <button onClick="ondianz(this)" data-btnName="bounceOutDown">bounceOutDown</button> <button onClick="ondianz(this)" data-btnName="bounceOutLeft">bounceOutLeft</button> <button onClick="ondianz(this)" data-btnName="bounceOutRight">bounceOutRight</button> <button onClick="ondianz(this)" data-btnName="bounceOutUp">bounceOutUp</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Fading Entrances</text> <button onClick="ondianz(this)" data-btnName="fadeIn">fadeIn</button> <button onClick="ondianz(this)" data-btnName="fadeInDown">fadeInDown</button> <button onClick="ondianz(this)" data-btnName="fadeInDownBig">fadeInDownBig</button> <button onClick="ondianz(this)" data-btnName="fadeInLeft">fadeInLeft</button> <button onClick="ondianz(this)" data-btnName="fadeInLeftBig">fadeInLeftBig</button> <button onClick="ondianz(this)" data-btnName="fadeInRight">fadeInRight</button> <button onClick="ondianz(this)" data-btnName="fadeInRightBig">fadeInRightBig</button> <button onClick="ondianz(this)" data-btnName="fadeInUp">fadeInUp</button> <button onClick="ondianz(this)" data-btnName="fadeInUpBig">fadeInUpBig</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Fading Exits</text> <button onClick="ondianz(this)" data-btnName="fadeOut">fadeOut</button> <button onClick="ondianz(this)" data-btnName="fadeOutDown">fadeOutDown</button> <button onClick="ondianz(this)" data-btnName="fadeOutDownBig">fadeOutDownBig</button> <button onClick="ondianz(this)" data-btnName="fadeOutLeft">fadeOutLeft</button> <button onClick="ondianz(this)" data-btnName="fadeOutLeftBig">fadeOutLeftBig</button> <button onClick="ondianz(this)" data-btnName="fadeOutRight">fadeOutRight</button> <button onClick="ondianz(this)" data-btnName="fadeOutRightBig">fadeOutRightBig</button> <button onClick="ondianz(this)" data-btnName="fadeOutUp">fadeOutUp</button> <button onClick="ondianz(this)" data-btnName="fadeOutUpBig">fadeOutUpBig</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Flippers</text> <button onClick="ondianz(this)" data-btnName="flip">flip</button> <button onClick="ondianz(this)" data-btnName="flipInX">flipInX</button> <button onClick="ondianz(this)" data-btnName="flipInY">flipInY</button> <button onClick="ondianz(this)" data-btnName="flipOutX">flipOutX</button> <button onClick="ondianz(this)" data-btnName="flipOutY">flipOutY</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Lightspeed</text> <button onClick="ondianz(this)" data-btnName="lightSpeedIn">lightSpeedIn</button> <button onClick="ondianz(this)" data-btnName="lightSpeedOut">lightSpeedOut</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Rotating Entrances</text> <button onClick="ondianz(this)" data-btnName="rotateIn">rotateIn</button> <button onClick="ondianz(this)" data-btnName="rotateInDownLeft">rotateInDownLeft</button> <button onClick="ondianz(this)" data-btnName="rotateInDownRight">rotateInDownRight</button> <button onClick="ondianz(this)" data-btnName="rotateInUpLeft">rotateInUpLeft</button> <button onClick="ondianz(this)" data-btnName="rotateInUpRight">rotateInUpRight</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Rotating Exits</text> <button onClick="ondianz(this)" data-btnName="rotateOut">rotateOut</button> <button onClick="ondianz(this)" data-btnName="rotateOutDownLeft">rotateOutDownLeft</button> <button onClick="ondianz(this)" data-btnName="rotateOutDownRight">rotateOutDownRight</button> <button onClick="ondianz(this)" data-btnName="rotateOutUpLeft">rotateOutUpLeft</button> <button onClick="ondianz(this)" data-btnName="rotateOutUpRight">rotateOutUpRight</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Sliding Entrances</text> <button onClick="ondianz(this)" data-btnName="slideInUp">slideInUp</button> <button onClick="ondianz(this)" data-btnName="slideInDown">slideInDown</button> <button onClick="ondianz(this)" data-btnName="slideInLeft">slideInLeft</button> <button onClick="ondianz(this)" data-btnName="slideInRight">slideInRight</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Sliding Exits</text> <button onClick="ondianz(this)" data-btnName="slideOutUp">slideOutUp</button> <button onClick="ondianz(this)" data-btnName="slideOutDown">slideOutDown</button> <button onClick="ondianz(this)" data-btnName="slideOutLeft">slideOutLeft</button> <button onClick="ondianz(this)" data-btnName="slideOutRight">slideOutRight</button> </div> <div class="AttentionSeekers"> <text style='width:100%;font-size:23px;padding:10rpx;background-color:green;color:white;'>Zoom Entrances</text> <button onClick="ondianz(this)" data-