直接用我的一段代码演示下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. 百度地图 驾车/公交查询Demo（支持多起点多终点）

    效果图: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. Atitit.获取验证码图片通过web

    Atitit.获取验证码图片通过web 1. WebRequest进行较为底层的访问(不推荐) 1 2. WebBrowser截图 1 3. 剪贴板复制法Clipboard(推荐) 1 4. C# 取 ...

  3. Selenium - 设置元素等待

    一.sleep () 休眠方法   --time 固定等待 在开发自动化框架过程中,最忌讳使用Python自带模块的time的sleep方法进行等待,虽然可以自定义等待时间,但当网络条件良好时, 依旧 ...

  4. 非常多学ThinkPHP的新手会遇到的问题

    在模板传递变量的时候,非常多视频教程都使用$v.channel的方式.例如以下: <a href="{:U('Chat/set',array('id'=>$v.channel)) ...

  5. C语言 · 最大乘积

      算法提高 最大乘积   时间限制:1.0s   内存限制:512.0MB      问题描述 对于n个数,从中取出m个数,如何取使得这m个数的乘积最大呢? 输入格式 第一行一个数表示数据组数 每组 ...

  6. VS中C#读取app.config数据库配置字符串的三种方法(转)

    关于VS2008或VS2005中数据库配置字符串的三种取法 VS2008建立Form程序时,如果添加数据源会在配置文件 app.config中自动写入连接字符串,这个字符串将会在你利用DataSet, ...

  7. EasyUI DataGrid合并单元

    <table id="tt"></table> $('#tt').datagrid({     title:'Merge Cells',     iconC ...

  8. 使用JAVASCRIPT进行数据完整性验证

    页面输入完整性是编写BS经常遇到的问题,如果那里需要就到那里写,那可是要花不少的时候,并且造成不必要的浪费,下面是一个通过校验脚本,使用非常方便,通过传入FORM名就可以进行校验,通过在页面控件中增加 ...

  9. 使用Javascript实现随机字符串

    方法一(其实是毫秒时间数字字符串): function randomString() { return '' + new Date().getTime(); } 方法二(随机字母数字字符串): var ...

  10. C++ 类的继承一（访问控制）

    //类的继承 #include<iostream> using namespace std; /* 面向对象中的继承类之间的父子关系 1.子类拥有父类所有的成员属性和成员函数(包括私有成员 ...