直接用我的一段代码演示下css3中实现动画效果的事例，让一个div自动旋转起来

代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style type="text/css">

    .ellipsis{

        width:200px;

        height:200px;

        line-height:200px;

        border:1px solid red;

        overflow:hidden;

        white-space:nowrap;

        text-overflow:ellipsis;

        animation: 5.5s linear 0s normal none infinite rotate;

    }

    @-webkit-keyframes rotate{

        from{-webkit-transform:rotate(0deg)}

        to{-webkit-transform:rotate(360deg)}

    }

    @-moz-keyframes rotate{

        from{-moz-transform:rotate(0deg)}

        to{-moz-transform:rotate(360deg)}

    }

    @-ms-keyframes rotate{

        from{-ms-transform:rotate(0deg)}

        to{-ms-transform:rotate(360deg)}

    }

    @-o-keyframes rotate{

        from{-o-transform:rotate(0deg)}

        to{-o-transform:rotate(360deg)}

    }

  </style>

 </head>

 <body>

  <div class="ellipsis">ellipsisellipsisellipsisellipsisellipsisellipsisellipsis</div>

 </body>

</html>

css3中的动画功能的更多相关文章

  1. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  2. CSS3中的动画功能（二）

    上一篇文章讲解了css3动画中的一个即transitions,那么今天来说说另外一个animations.和transitions不同的是animations可以定义多个关键帧以及每个关键帧中元素的属 ...

  3. CSS3中的动画

    CSS3中的动画包括两种: Transition(过渡) Animation(动画) 这两种方法都可以让元素动起来,功能类似,但是稍有区别: Transition只定义某一个元素的开始状态和结束状态 ...

  4. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  7. CSS3的transition动画功能

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

  8. 学习css3中的动画

    css animations 主要有两块构成,那么是哪两块呢? keyframes : 定义了什么阶段展示什么样的动画 animation 属性 :把动画挂载到一个具体的dom上,并且定义如何动起来: ...

  9. 第100天：CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

随机推荐

  1. unity, 导出对象到另一个项目

    ----更新(2015-6-26): 今天又试了一下,有时候prefabs不用导出直接拷贝过去也能用,但有时候不行.还不太清楚原因. ----旧帖: 一,正确做法: 一个对象包括资源和Hierarch ...

  2. Atitit. 构造ast 语法树的总结attilax oao

    Atitit. 构造ast 语法树的总结attilax oao 1. 能那更加有意义的名字来命名ast节点... 1 2. 如何命名表达式名称..使用实际对象名称,而不是操作符号表达式更好 1 2.1 ...

  3. atitit.故障排除--- 当前命令发生了严重错误。应放弃任何可能产生的结果sql server 2008

    atitit.故障排除--- 当前命令发生了严重错误.应放弃任何可能产生的结果sql server 2008 1. 现象 1 2. 原因:::sql server的bug 或者限制,查询的时候儿使用资 ...

  4. LPC（Low Pin Count） 与SIO（Super IO）

    记录bios学习的点点滴滴,虽然已经学了很长时间才发出来,但就当是温故而知新吧,由于水平有限,难免存在错误,望指正,同时感谢CSDN提供的平台. 1.LPC 定义:​ Intel所定义的PC接口,将以 ...

  5. PCI总线 DMA burst 基本概念

    转载地址:http://blog.csdn.net/sunjiajiang/article/details/7945057 DMA和burst不是一个概念. DMA传送不经过CPU的控制,假如硬盘的数 ...

  6. zoj 1562 反素数 附上个人对反素数性质的证明

    反素数的定义:对于不论什么正整数,其约数个数记为.比如,假设某个正整数满足:对随意的正整 数.都有,那么称为反素数. 从反素数的定义中能够看出两个性质: (1)一个反素数的全部质因子必定是从2開始的连 ...

  7. linux 下面压缩，解压.rar文件以及rar,unrar实例

    http://www.rarlab.com/download.htm [root@bass src]# wget http://www.rarlab.com/rar/rarlinux-x64-5.4. ...

  8. 每日英语：China's Bad Earth

    In Dapu, a rain-drenched rural outpost in the heart of China's grain basket, a farmer grows crops th ...

  9. jQuery元素操作1

    元素操作 1.2.1 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 1. ...

  10. oracle autotrace

    --======================= -- 启用 AUTOTRACE功能 --======================= AUTOTRACE是一个SQL*Plus工具,用于跟踪SQL ...