动画效果说明

最后更新:    浏览次数: 767

动画效果是什么怎么用?

动画效果是指把一些图片文字进行偏移,淡入,缩放等效果。动画效果我们已经把一些常用的动画效果进行封装,只要调用一些参数就可以实现你要的效果了。

参数列表

友情提示:过度使用特效会降低页面性能

名称 功能 默认值
data-animated 定义一个动画 -
data-countup 定义一个数字累加的效果(必须启用data-animated 启用该项勿定义其后任何参数) -
data-reset 是否重复执行 -
data-delay 延迟执行时间(毫秒) 0
data-distance 动画元素起始执行的距离 '0px'
data-duration 动画完成所需时间(毫秒) 600
data-easing 动画开始值和结束值 之间的过渡方式 'cubic-bezier(0.5, 0, 0, 1)'
data-opacity 动画开始之前的不透明度 0
data-origin 动画来自方向(top|right|bottom|left) 'bottom'
data-rotate 显示之前的旋转元素 ' { x: 0,y:0,z: 0 }'
data-scale 元素显示之前的缩放比例 1

动画效果的展示

偏移

代码

<div data-animated>1000</div>

效果

1000

说明:

data-animated是把文字或图片进行偏移,默认是从下往上.要使用动画效果必需要加data-animated

数字的累加

代码

<span data-animated data-countup>1000</span>

效果

1000

说明:

data-countup代表的就是进行累加,有一点要注意要加的必须是数字,不能带有文字字符等不属于数字的.

是否重复执行

代码

<div data-animated data-reset>1000</div>

效果

1000

说明:

在不加data-reset的时候偏移效果只会出现一次,加了之后每次到达添加的地方就会进行偏移

延迟执行时间(毫秒)

代码

<div data-animated data-delay="1000">1000</div>

效果

1000

说明:

添加了data-delay之后,你到达添加的地方就不会马上进行你添加的效果会等待到你设置的时间才进行你设置的效果.

动画元素起始执行的距离

代码

<div data-animated data-distance="5px">1000</div>

效果

1000

说明:

在使用data-animated的时候如果感觉偏移的距离太长了,就可以设置data-distance来控制偏移多少像素

动画完成所需时间(毫秒)

代码

<div data-animated data-duration="1000">1000</div>

效果

1000

说明:

在使用data-animated的时候如果感觉偏移的时间太长或太短了,就可以设置data-duration来控制偏移所需要的时间

动画开始值和结束值之间的过渡方式

代码

<div data-animated data-easing>1000</div>

效果

1000

说明:

动画开始之前的不透明度

代码

<div data-animated data-opacity="100">1000</div>

效果

1000

说明:

data-opacity可以调节动画开始之前的不透明度

动画来自方向

代码

<div data-animated data-origin="left">1000</div>

效果

1000

说明:

在使用的data-animated的时候如果想换偏移方向的时候就可以用到data-origin,有四个值上top|右right|下bottom|左left

显示之前的旋转元素

代码

<div data-animated data-rotate="{x:180,y:180,z:180}"">1000</div>

效果

1000

说明:

元素显示之前的缩放比例

代码

<div data-animated data-scale="2">1000</div>

效果

1000

说明:

可以设置data-scale让文字从大到小或从小到大的变化
电子邮件
info@zmpress.com
热线电话
+86 13587721433
微信关注
WeChat
在线客服
在线询盘
顶部