zoukankan      html  css  js  c++  java
  • 第三方 Animate CSS3动画库的 应用。

    代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Animate Demo</title>
    <link rel="stylesheet" type="text/css" href="animate.min.css">
    <style type="text/css">
    div{
        width:200px;
        height:150px;
        background-color:blue;
    }
    </style>
    </head>
    <body>
    <div class="animated bounceInLeft"></div>
    <div class="animated bounceOut"></div>
    <div class="animated fadeIn"></div>
    <div class="animated flash"></div>
    <div class="animated flipInX"></div>
    <div class="animated hinge"></div>
    <div class="animated rotateInDownLeft"></div>
    <div class="animated swing"></div>
    <div class="animated tada"></div>
    <div class="animated wobble"></div>
    <div id="ani"></div>
    <script src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#ani").addClass("animated flipInY");    
    });
    </script>
    </body>
    </html>

    课后作业:

    1.复制上述代码,预览查看效果。

    2.读懂上述代码。

    第三方CSS动画库CSS文件下载地址:

    https://blog-static.cnblogs.com/files/exesoft/animate.min.css

  • 相关阅读:
    面向对象初识
    day 20 异常
    day 16 正则表达式
    day 13 生成器,推导式
    CSS
    html页面编写
    DAY 17常用模块
    DAY16 模块和包的导入
    DAY15 模块
    DAY14 函数(三)
  • 原文地址:https://www.cnblogs.com/exesoft/p/13042507.html
Copyright © 2011-2022 走看看