📖 正文内容
CSS3动画类
在实用价值的前提之下,我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中,发挥着重要的作用。layui 的动画全部采用 CSS3,因此不支持 ie8 和部分不支持 ie9。
动画的使用非常简单,直接对元素赋值动画特定的 class 类名即可。如:
</>code
- 其中 layui-anim 是必须的,后面跟着的即是不同的动画类
- <div class="layui-anim layui-anim-up"></div>
- 循环动画,追加:layui-anim-loop
- <div class="layui-anim layui-anim-up layui-anim-loop"></div>
下面是不同的动画类名,点击下述绿色块,可直接预览动画
-
顶部往下滑入layui-anim-down
-
微微往下滑入layui-anim-downbit
-
底部往上滑入layui-anim-up
-
微微往上滑入layui-anim-upbit
-
平滑放大layui-anim-scale
-
弹簧式放大layui-anim-scaleSpring
-
平滑放小layui-anim-scalesmall
-
弹簧式放小layui-anim-scalesmall-spring
-
渐现layui-anim-fadein
-
渐隐layui-anim-fadeout
-
360度旋转layui-anim-rotate
-
循环动画追加:layui-anim-loop
物不在多,有用则精。
layui - 在每一个细节中,用心与你沟通
💬 评论交流
这个技巧很实用,感谢分享!