强大的CSS3动画库animate.css
2023-09-27 14:28:19 时间
今天要给大家介绍一款强大的CSS3动画库animate.css,animate.css定义了大概50多种动画形式,包括淡入淡出,文字飞入、左右摇摆动画等等。使用animate.css也非常简单,你可以给页面上的任意元素,特别是文字添加各种神奇的动画特效,一起来尝试一下吧。
实现的代码。
html代码:
<header class="site__header island"> <div class="wrap"> <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">Animate.css</h1></span> <span class="beta subhead">Just-add-water CSS animations</span> </div> </header> <!-- /.site__header --> <main class="site__content island" role="content"> <div class="wrap"> <form> <select class="input input--dropdown js--animations"> <optgroup label="Attention Seekers"> <option value="bounce">bounce</option> <option value="flash">flash</option> <option value="pulse">pulse</option> <option value="rubberBand">rubberBand</option> <option value="shake">shake</option> <option value="swing">swing</option> <option value="tada">tada</option> <option value="wobble">wobble</option> </optgroup> <optgroup label="Bouncing Entrances"> <option value="bounceIn">bounceIn</option> <option value="bounceInDown">bounceInDown</option> <option value="bounceInLeft">bounceInLeft</option> <option value="bounceInRight">bounceInRight</option> <option value="bounceInUp">bounceInUp</option> </optgroup> <optgroup label="Bouncing Exits"> <option value="bounceOut">bounceOut</option> <option value="bounceOutDown">bounceOutDown</option> <option value="bounceOutLeft">bounceOutLeft</option> <option value="bounceOutRight">bounceOutRight</option> <option value="bounceOutUp">bounceOutUp</option> </optgroup> <optgroup label="Fading Entrances"> <option value="fadeIn">fadeIn</option> <option value="fadeInDown">fadeInDown</option> <option value="fadeInDownBig">fadeInDownBig</option> <option value="fadeInLeft">fadeInLeft</option> <option value="fadeInLeftBig">fadeInLeftBig</option> <option value="fadeInRight">fadeInRight</option> <option value="fadeInRightBig">fadeInRightBig</option> <option value="fadeInUp">fadeInUp</option> <option value="fadeInUpBig">fadeInUpBig</option> </optgroup> <optgroup label="Fading Exits"> <option value="fadeOut">fadeOut</option> <option value="fadeOutDown">fadeOutDown</option> <option value="fadeOutDownBig">fadeOutDownBig</option> <option value="fadeOutLeft">fadeOutLeft</option> <option value="fadeOutLeftBig">fadeOutLeftBig</option> <option value="fadeOutRight">fadeOutRight</option> <option value="fadeOutRightBig">fadeOutRightBig</option> <option value="fadeOutUp">fadeOutUp</option> <option value="fadeOutUpBig">fadeOutUpBig</option> </optgroup> <optgroup label="Flippers"> <option value="flip">flip</option> <option value="flipInX">flipInX</option> <option value="flipInY">flipInY</option> <option value="flipOutX">flipOutX</option> <option value="flipOutY">flipOutY</option> </optgroup> <optgroup label="Lightspeed"> <option value="lightSpeedIn">lightSpeedIn</option> <option value="lightSpeedOut">lightSpeedOut</option> </optgroup> <optgroup label="Rotating Entrances"> <option value="rotateIn">rotateIn</option> <option value="rotateInDownLeft">rotateInDownLeft</option> <option value="rotateInDownRight">rotateInDownRight</option> <option value="rotateInUpLeft">rotateInUpLeft</option> <option value="rotateInUpRight">rotateInUpRight</option> </optgroup> <optgroup label="Rotating Exits"> <option value="rotateOut">rotateOut</option> <option value="rotateOutDownLeft">rotateOutDownLeft</option> <option value="rotateOutDownRight">rotateOutDownRight</option> <option value="rotateOutUpLeft">rotateOutUpLeft</option> <option value="rotateOutUpRight">rotateOutUpRight</option> </optgroup> <optgroup label="Specials"> <option value="hinge">hinge</option> <option value="rollIn">rollIn</option> <option value="rollOut">rollOut</option> </optgroup> <optgroup label="Zoom Entrances"> <option value="zoomIn">zoomIn</option> <option value="zoomInDown">zoomInDown</option> <option value="zoomInLeft">zoomInLeft</option> <option value="zoomInRight">zoomInRight</option> <option value="zoomInUp">zoomInUp</option> </optgroup> <optgroup label="Zoom Exits"> <option value="zoomOut">zoomOut</option> <option value="zoomOutDown">zoomOutDown</option> <option value="zoomOutLeft">zoomOutLeft</option> <option value="zoomOutRight">zoomOutRight</option> <option value="zoomOutUp">zoomOutUp</option> </optgroup> </select> <button class="butt js--triggerAnimation">重试效果</button> </form> </div> </main>
相关文章
- css3写一个加载动画
- 交互必备!国外创意的界面设计和交互动画库
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 使用 CSS3 动感的图片标题动画效果【附源码下载】
- blender导出UE4用的FBX骨骼动画
- Unity-动画机学习
- android之frame动画详解
- 基于jQuery CSS3鼠标点击动画效果
- 基于jQ+CSS3页面滚动内容元素动画特效
- 纯css3实现的动画加载条
- 基于CSS3制作的鼠标悬停动画菜单
- 基于css3的鼠标经过动画显示详情特效
- 纯css3实现的win8加载动画
- 一款简洁的纯css3代码实现的动画导航
- CSS3 Transitions属性打造动画的下载按钮特效
- InstaMaterial:正确处理RecyclerView动画
- 2019-3-27-win10-uwp-动画移动滑动条的滑块
- React-Native-Navigator导航条-push不同动画
- React Native 下拉刷新添加自定义动画