动效
动效为CSS3动画效果,框架用.effect
定义动效样式;动效果执行分四种类型,一是直接执行,则使用.effect
叠加动效样式即可(如.effect.fadein
);二为悬浮执行动效,则使用.effect-hover
叠加动效样式(如.effect-hover.fadein
);三为上级元素悬浮动效,则上级元素使用.effect-hover
;四为上级元素叠加样式执行动态,则上级元素在使用.effect
的基础上叠加.active
样式时执行动效。
执行示例
直接/悬浮执行
即为直接在元素上叠加.effect
或.effect-hover
样式,使元素直接显示动态或悬浮使用动效。
直接执行
悬浮执行
<div class="effect fadein">直接执行</div> <div class="effect-hover fadein">悬浮执行</div>
上级悬浮/叠加执行
即为上级元素使用.effect-hover
或.effect.active
样式,使元素直接显示动态或悬浮使用动效。
上级悬浮
上级叠加
<div class="effect-hover"> <div class="fadein">上级悬浮</div> </div> <div class="effect active"> <div class="fadein">上级叠加</div> </div>
淡入动效
淡入:
淡入
淡入
上淡入
上淡入
下淡入
下淡入
左淡入
左淡入
右淡入
右淡入
<div class="effect-hover"> <div class="fadein">淡入</div> </div> <div class="effect-hover"> <div class="fadein fadein-top">上淡入</div> </div> <div class="effect-hover"> <div class="fadein fadein-bottom">下淡入</div> </div> <div class="effect-hover"> <div class="fadein fadein-left">左淡入</div> </div> <div class="effect-hover"> <div class="fadein fadein-right">右淡入</div> </div>
淡出动效
淡出
上淡出
下淡出
左淡出
右淡出
<div class="effect-hover fadeout">淡出</div> <div class="effect-hover fadeout fadeout-top">上淡出</div> <div class="effect-hover fadeout fadeout-bottom">下淡出</div> <div class="effect-hover fadeout fadeout-left">左淡出</div> <div class="effect-hover fadeout fadeout-right">右淡出</div>
位移动效
上位移
下位移
左位移
右位移
<div class="effect-hover offset-top">上位移</div> <div class="effect-hover offset-bottom">下位移</div> <div class="effect-hover offset-left">左位移</div> <div class="effect-hover offset-right">右位移</div>
缩放动效
放大
缩小
<div class="effect-hover"> <div class="scale">放大</div> </div> <div class="effect-hover"> <div class="shrink">缩小</div> </div>
开关动效
在一定宽高元素内,可使用开关动态。
宽展开
高展开
宽关闭
高关闭
<div class="effect-hover" style="width:120px;height:120px;"> <div class="open-width"></div> </div> <div class="effect-hover" style="width:120px;height:120px;"> <div class="open-height"></div> </div> <div class="effect-hover" style="width:120px;height:120px;"> <div class="close-width"></div> </div> <div class="effect-hover" style="width:120px;height:120px;"> <div class="close-height"></div> </div>
旋转动效
旋转
旋转一次
<div class="effect-hover rotate">旋转</div> <div class="effect-hover rotate-once">旋转一次</div>
替换动效
在限定元素高的情况下,可使用替换动态,因有替换元素,替换动效只能使用上级元素的效果。
替换
换替
<div class="effect-hover" style="height:120px;"> <div class="change">替换</div> <div class="change">换替</div> </div>