Heim > Web-Frontend > HTML-Tutorial > 强大的CSS3动画库animate.css_html/css_WEB-ITnose

强大的CSS3动画库animate.css_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:47:35
Original
1015 Leute haben es durchsucht

今天要给大家介绍一款强大的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>
Nach dem Login kopieren

via:http://www.w2bc.com/Article/28857

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage