动画效果

CSS3动画效果

  CSS3动画样式如下:
  • ui-am-fade
  • ui-am-scale-up
  • ui-am-scale-down
  • ui-am-slide-top
  • ui-am-slide-bottom
  • ui-am-slide-left
  • ui-am-slide-right
  • ui-am-slide-top-fixed
  • ui-am-shake
  • ui-am-spin
  • ui-am-left-spring
  • ui-am-right-spring
fade
scale-up
scale-down
slide-top
slide-bottom
slide-left
slide-right
slide-top-fixed
shake
spin
left-spring
right-spring

延迟动画效果

scale-up
slide-top
slide-bottom
slide-left
slide-right
slide-top-fixed
<div class="ui-btn ui-am-scale-up ui-am-delay-1">scale-up</div>
<div class="ui-btn ui-am-slide-top ui-am-delay-1-5">slide-top</div>
<div class="ui-btn ui-am-slide-bottom ui-am-delay-2">slide-bottom</div>
<div class="ui-btn ui-am-slide-left ui-am-delay-2-5">slide-left</div>
<div class="ui-btn ui-am-slide-right ui-am-delay-3">slide-right</div>
<div class="ui-btn ui-am-slide-top-fixed ui-am-delay-3-5">slide-top-fixed</div>
参数 说明
ui-am-delay-1 延迟1秒
ui-am-delay-1-5 延迟1.5秒
ui-am-delay-2 延迟2秒
ui-am-delay-2-5 延迟2.5秒
ui-am-delay-3 延迟3秒
ui-am-delay-3-5 延迟3.5秒

页面滚动动画

  Html元素需要添加如下样式:
  • ui-scrollspy
<a class="ui-btn ui-scrollspy" data-am="ui-am-scale-up" data-time="500" data-loop="true">按钮</a><br><br>
<a class="ui-btn ui-btn-blue ui-scrollspy" data-am="ui-am-slide-top" data-time="600" data-loop="true">按钮</a><br><br>
<a class="ui-btn ui-btn-blue ui-scrollspy" data-am="ui-am-slide-bottom" data-time="700" data-loop="true">按钮</a><br><br>
<a class="ui-btn ui-btn-blue ui-scrollspy" data-am="ui-am-slide-left" data-time="800" data-loop="true">按钮</a><br><br>
<a class="ui-btn ui-btn-blue ui-scrollspy" data-am="ui-am-slide-right" data-time="900" data-loop="true">按钮</a>
参数 说明
data-am 动画名称
data-time 延迟时间
data-loop 是否循环