CSS3动画特效设置按钮

CSS3动画特效是网店秀PC端工具中比较重要的功能,内置于网店秀的部分组件中,达到实现较为复杂的动画效果的功能。因为经常使用到,所以我们单独拿出来加以介绍。

下面我们以任意图层组件为例做详细介绍,其他包含此功能的组件同理。

点击按钮后

1区:为任意图层独需的动画效果,控制鼠标浮上换图的效果。

当然了,如果我们的任意图层如果只填了一个图片,

则说明无需切换图片,则1区的动画效果无效

2区:为默认样式(鼠标还没浮动上去的时候);例如如果我们选了旋转状态

则默认样式从

改为

3区:动画特效。

该区可以编辑更多的动画效果。

动画基础设置

开启动画:开启后,3区内动画特效才能正常使用

动画时间:动画特效的快慢,无则是默认时间

动画样式:控制动画切换的效果,具体的区别可以通过试换预览对比

鼠标移动到单个图层上触发

控制鼠标放到该组件上的时候触发的动画

鼠标移动到整个模块上触发

控制鼠标放到正在编辑的模块上的时候触发的动画

进一步解释:我们知道,我们正在编辑的模块可能会包含多个组件;当我们想鼠标不管放到哪一个地方都会展示动画效果的时候那就用这个【鼠标移动到整个模块上触发】;而当我们仅仅想鼠标放到当前组件上才展示动画效果的时候那就用这个【鼠标移动到单个图层上触发】

动画序列触发(轮播缩略图选中时)

此功能仅会用到我们使用【任意轮播】或【动画序列】组件中。

这个动画序列触发和上面讲的鼠标移动触发有什么区别呢?

鼠标移动触发说直白点,就是鼠标放上和离开的时候出现“变化”;而【任意轮播】或【动画序列】的内容有个自动“变化”的特点(任意轮播也可手动);那我们就明白了,无论鼠标移动触发还是动画序列触发只要是你“变化”,那就可以出现css3动画。

无非是想鼠标出现动画的时候我用

想【任意轮播】或【动画序列】出现动画的时候我用

例如【任意轮播】组件的轮播内容使用【任意图层】组件的css3动画中的动画序列触发功能可以实现如下效果:

当然,由于网店秀的强大,同样的效果可以用不同的方法实现,比方上面的效果,用组件动画轮播也可以实现。

results matching ""

    No results matching ""