直接用我的一段代码演示下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. JEECG 多数据源设计

    转至元数据起始   为什么要有多数据源? 通常一个系统只需要连接一个数据库就可以了,Jeecg数据源是配置在spring-mvc-hibernate.xml文件中,这种数据源我们叫做主数据源.但是在企 ...

  2. JMeter学习笔记（二）

    3.JMeter测试计划要素 JMeter中一个脚本即是一个测试计划,也是一个管理单元.JMeter的请求模拟与并发数(设置线程数,一个线程代表一个虚拟用户)设置都在脚本文件中一起设置. 要素一:脚本 ...

  3. 不同classloader装载的类不能互相访问?

    一,有两个术语,一个叫“定义类加载器”,一个叫“初始类加载器”. 比如有如下的类加载器结构: bootstrap   ExtClassloader     AppClassloader     -自定 ...

  4. beans.xml的用法

    beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns="ht ...

  5. Python字符与ASCII码转换

    有两个内置函数,记得以前在<Python Cookbook>里看到过. >>>print ord('a') 97 >>>print chr(97) a

  6. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  7. pip install read time-out

    Problem ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out. 1 S ...

  8. ural1517后缀数组

    题意:求两串字符(0————255)的最长公共字串 思路:先将两个字符链接起来,中间用一个不曾出现过的字符,然后直接求出height数组,然后根据它的特性,求出最长的公共字串,当然这个最长公共字串的坐 ...

  9. flume+kafka

    这里演示在单机fulume环境下,kafka作为source ,chanel , sink时三种情况 下面的测试都是基于下面的基本的配置文件进行修改的 a1.sources = r1 a1.sinks ...

  10. jquery mobile小经验

    现在网站上关于jquery mobile的demo和帖子可真少啊,我刚开始接触,遇到了一些问题,都找不到人请教. 这是我的个人经验总结,或多或少会对刚入门的童鞋有点帮助吧. 如果想一开始进入页面的时候 ...