CSS3
动画样式如下:
<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
元素需要添加如下样式:
<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 | 是否循环 |