直接用我的一段代码演示下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. tesseract中文语言文件包 下载

    tesseract中文语言文件包 下载 tesseract中文语言文件包 下载 tesseract中文语言文件包 下载 下载地址是:https://github.com/tesseract-ocr/l ...

  2. 采用 EventHandler 模式发布事件（转载）

    采用 EventHandler 模式发布事件 (如果不需要与事件一起发送自定义数据,请跳过此步骤,进入步骤 3a.)在发行者类和订阅方类均可看见的范围中声明自定义数据的类. 然后添加保留您的自定义事件 ...

  3. Java Persistence with MyBatis 小结2

    MyBatis 最关键的组成部分是 SqlSessionFactory,我们可以从中获取 SqlSession,并执行映射的 SQL 语句.SqlSessionFactory 对象可以通过基于 XML ...

  4. Elastic_Terms 内容分类统计

    Terms 按字段的值进行分类,并计算出doc_count, bucket聚合 类似于 group by 常用统计 分类并出现频率高的,并进一步挖出,计算出想要的数据. 参考资料 https://ww ...

  5. PHP.ini中配置屏蔽错误信息显示和保存错误日志

    在PHP程序运行过程中如果有错误发生,在浏览器上是否显示错误信息,以及显示错误信息的级别是我们在程序开发.调试.运营过程中需要控制的. root@(none):/alidata/www/default ...

  6. swift 继承和构造器

    继承 class Vehicle { var numberOfWheels: Int var maxPassengers: Int func description() -> String { ...

  7. FreeRTOS 二值信号量，互斥信号量，递归互斥信号量

    以下转载自安富莱电子: http://forum.armfly.com/forum.php 本章节讲解 FreeRTOS 任务间的同步和资源共享机制,二值信号量. 二值信号量是计数信号量的一种特殊形式 ...

  8. Shape Control for .NET

    Shape Control for .NET Yang Kok Wah, 23 Mar 2017 CPOL    4.83 (155 votes)   Rate this: vote 1vote 2v ...

  9. iOS开发 支持https请求以及ssl证书配置(转)

    原文地址:http://blog.5ibc.net/p/100221.html 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没 ...

  10. 跟着百度学PHP[9]-session与cookie的异同

    COOKIE cookie是将数据存储在客户端中,以此建立客户端与服务器之间的联系,但是cookie任然有一些局限性: 1.cookie相对不是很安全,容易被盗用导致cookie欺骗. 2.单个的co ...