一 使用Animate.css动画

// 通过@import引入外部CSS资源;

// 引入线上图片及JS文件;

// 通过更改CSS类名生成不同类型的CSS3动画;

 
 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

     </head>

     <style>

         /* Animate.css GitHub地址:https://github.com/daneden/animate.css */

         /* Animate.css 演示地址:https://daneden.github.io/animate.css/ */

         @import url("http://cdn.gbtags.com/animate.css/3.1.1/animate.min.css");

         body {

             background: #cfcfcf;

         }

         img {

             position: absolute;

             left: 50%;

             top:50%;

             margin-left: -100px;

             margin-top: -100px;

             width:200px;

             height:200px;

         }

     </style>

     <body>

         <img src="http://www.gbtags.com/gb/networks/uploadimg/074627f0-0a62-4176-aa85-06a4364deeab.png" alt="">

     </body>

     <script src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>

     <script>

         function rock (x) {                             // 定义事件函数;

             $('img').not('.center')

                     .addClass(x + ' animated')          // 添加CSS类名;

                     .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'

                     ,function(){

                         $(this).removeClass();

                     });

         };

         $(document).ready(function(){

             rock("rubberBand infinite");                // 添加CSS类名生成相应的动态效果;

             setTimeout(function(){window.lcation.href = "http://www.kiklink.com"},6000);

             // 设置时间跳转;

         });

     </script>

 </html>
 

二 自定义Animate.css动画

// 可以使用animate.css代码作为基础,编写自定义的动画效果;

 @keyframes bounce {                     /*通过@keyframes规则,创建bounce动画;*/

     0%,20%,50%,80%,100% {

         transform:translateY(0);

     }

     40% {

         transform:translateY(-30px);

     }

     60% {

         transform:translateY(-15px);

     }

 }

 .bounce {

     animation-name:bounce;              /*调用bounce动画;*/

 }

 .animated {

     animation-duration:3s;              /*一个动画周期的时长;*/

     animation-fill-mode:both;           /*指定动画执行之前之后的样式;*/

 }

 .animated.infinite {

     animation-iteration-count:infinite; /*定义动画播放的次数;(n次/infinite无限次);*/

 }
 <img class="animated bounce infinite" src="http://www.gbtags.com/gb/laitu/150x150" alt="">

三 使用JavaScript控制动画

 $('img').click(function(){              // 给Img元素绑定点击事件;

     var $this = $(this);                // 鼠标点击之后添加相应的动画类名;

     $this.addClass('animated bounce').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend',function(){

                                         // 当-webkit-animation动画结束之后会有一个webkitAnimationEnd事件;

                                         // 当one()方法监听到webkitAnimationEnd事件之后才执行function函数;one()方法只能执行一次;

         $this.removeClass();            // 清除相应的动画类名;

     })

 });

CSS--使用Animate.css制作动画效果的更多相关文章

  1. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  2. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  3. 一个CSS+jQuery的放大缩小动画效果

    日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...

  4. 用CSS实现加载的动画效果

    用纯CSS实现加载的一些动态效果,可以把加载效果中的元素分成很多个小部分,每个部分都有动画,每个部分的动画再设置相应的延迟效果,这样,看起来就是连贯的加载动画效果.代码如下: 1.效果1 <di ...

  5. 前端每日实战：140# 视频演示如何用纯 CSS 创作文本的淡入动画效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ZMwgqK 可交互视频 此视频是可 ...

  6. 制作动画效果：《CSS3 Animation》

    在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...

  7. 用纯CSS实现加载中动画效果

    HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...

  8. HTML+CSS实现鼠标点上去动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS实现四种loading动画效果

    四种loading加载效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. FPGA的发展史及FPGA 的基础架构

    通过了解早期FPGA的发展,理解FPGA究竟是干什么的,FPGA到底在电子设计领域起到了什么样的作用,下面是一张早期的设计过程 早期的设计流程过程中,只有当硬件完成了才能够得到功能的验证,随着集成电路 ...

  2. ajax 删除数据无刷新

    //html页面 <!doctype html><head> <title></title> <meta http-equiv="Con ...

  3. 关于SGA中的granule size

    1.什么是granule? granule直译为颗粒,ORACLE为SGA 中的组件(eg:log buffer/db buffer/large pool等)分配的最小单元为一个granule. 所以 ...

  4. mac下安装安卓开发环境

    对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...

  5. 学习WPF——使用Font-Awesome图标字体（一）

    一.运行效果图 二.图标字体文件下载 http://fontawesome.dashgame.com/(这个网址可以下载图标字体文件) http://www.fontawesome.com.cn/(这 ...

  6. TensorFlow 神经网络教程

    TensorFlow 是一个用于机器学习应用程序的开源库.它是谷歌大脑的第二代系统,在取代了近源的 DistBelief 之后,被谷歌用于研究和生产应用.TensorFlow 提供了很多种语言接口,包 ...

  7. postgresql-分页数据重复问题探索

    postgresql-分页数据重复探索 问题背景 许多开发和测试人员都可能遇到过列表的数据翻下一页的时候显示了上一页的数据,也就是翻页会有重复的数据. 如何处理? 这个问题出现的原因是因为选择的排序字 ...

  8. CSS实现table固定宽度，超过单元格部分内容省略

    <table>单元格的宽度是根据内容的大小自适应的,没有内容的地方就挤到了一起.需要固定表格宽度和每一列的宽度. table-layout:fixed 在固定表格布局中,水平布局仅取决于表 ...

  9. Linux编程 7 (实时监测进程 top， 结束进程kill，killall)

    一. 实时监测进程 top 在一篇里讲到ps命令在收集进程信息时非常有用,但它只能显示某个特定时间点的信息.想要观察那些频繁换进换出的内存进程趋势,用top命令是合适的.使用top命令如下图所示: 在 ...

  10. SpringBoot的幕后推手...

    一.背景 ​ 这两年随着微服务的盛行,SpringBoot框架水到渠成的得到了高曝光,作为程序猿的我们,现在要是不知道一点SpringBoot相关的东西,貌似出去找工作都会被深深地鄙视,不过在我们开始 ...