• Animate.css(一款有意思的CSS3动画库)


    官网:https://daneden.github.io/animate.css/

    animate.css 是一款跨浏览器的动画库。

    使用方式:

    1. 在页面的 <head>中引入样式文件:

      <head>
      <link rel="stylesheet" href="animate.min.css">
      </head>
    2. 给你想要添加动画效果的元素加上 animated 样式,如果想要动画循环执行的话,你需要加上 infinite 样式。

    3. 具体样式在官网一一列举出来啦,而且可以直接查看效果,很炫酷啊!

    例子:

    <h1 class="animated infinite bounce">Example</h1>

    当你将 animate.css 与 jQuery 一起使用或者添加你自己的 CSS 规则时, 你可以用 animate.css 做一大堆其他的事,使用 jQuery 动态添加动画:

    $('#yourElement').addClass('animated bounceOutLeft');

    你也可以检测一个动画是否结束了:

    $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

    注意: jQuery.one() 用在你希望只执行事件一次 的时候。

    你可以改变动画的持续时间,添加延迟或改变它执行的次数:

    #yourElement {
      -vendor-animation-duration: 3s;
      -vendor-animation-delay: 2s;
      -vendor-animation-iteration-count: infinite;
    }

    注意:确保用供应商的前缀(webkit, moz, 等等)来替换上面CSS中的 vendor



  • 相关阅读:
    PHP生成pdf文档
    PHP将数据库数据批量生成word文档
    三个常用的PHP图表类库
    Javascript——(1)
    python学习HTML之CSS(2)
    python学习HTML之CSS
    python学习之HTML
    python学习之rabbitmq
    第10周15/16/17
    多进程
  • 原文地址:https://www.cnblogs.com/cjx-work/p/7978947.html
Copyright © 2020-2023  润新知