直接用我的一段代码演示下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. Linux更改Apache网站目录出错：Document root must be a directory解决

    Linux更改Apache网站目录出错:Document root must be a directory解决   修改   DocumentRoot     <Directory " ...

  2. ARM开发工具软件命令具体解释---嵌入式回归第三篇

    先从bootloader開始,由于临时眼下这些都会是裸机程序相关. 本人这里是VMwarm10.0上安装的红帽linux虚拟机.从以下的截图中能够看出 裸机开发流程: 这里先做第三步(第一步第二步已提 ...

  3. putty自带工具plink自动登陆ssh

    PLINK.EXE -C -N -D 127.0.0.1:7000 root@111.111.111.111  -pw 123456 解释成中文: PLINK.EXE -启用数据压缩 -不要shell ...

  4. 带密匙的php加密解密代码

    php加密解密示例,代码如下: <?php $id = "http://www.jbxue.com"; $token = encrypt($id, 'E', 'jbxue') ...

  5. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  6. atitit.抽奖活动插件组件设计--结构设计and 抽奖流程建模

    atitit.抽奖活动插件组件设计--结构设计and 抽奖流程建模 1. 组件结构 1 2. startDraw 开始抽奖流程建模 1 3. 抽奖算法 2 作者:: 老哇的爪子 Attilax 艾龙, ...

  7. Python中的strip()的理解

    在看到Python中strip的时候产生了疑问 strip() 用于移除字符串头尾指定的字符(默认为空格) 开始测试: >>> s = 'ncy_123.python' >&g ...

  8. android.animation(2) - ValueAnimator的 Interpolator 和 Evaluator

    一.插值器 插值器,也叫加速器:有关插值器的知识,我在<Animation动画详解(二)——Interpolator插值器>中专门讲过,大家可以先看看这篇文章中各个加速器的效果.这里再讲一 ...

  9. 每日英语：Stalled Project Shows Why China's Economy Is Wobbling

    CAOFEIDIAN, China  $91 billion industrial project here, mired in debt and unfulfilled promise, sugge ...

  10. 禁止Chrome浏览器自动升级

    对于我们测试人员来说,浏览器自动升级是非常可怕的,浏览器的升级会导致出现各种bug,比如我们常用的Selenium,如果Chrome浏览器自动升级就会导致脚本出错,无法打开浏览器等等情况,对于这种情况 ...