直接用我的一段代码演示下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. 利用docker-maven-plugin快速交测

    目的 由开发环境交测的时候,通过docker镜像简化环境搭建及项目部署的过程. 环境描述 项目开发环境: windowns7 在windowns7中通过VMware Workstation安装Cent ...

  2. HDU 5321 Beautiful Set 漂亮集合

    题意:给定一个集合,含有n个数.浙理工先生和杭电先生各自有计算这个集合漂亮值的方法. 浙理工先生的计算方法是:对于这个n个数的某个排列,此排列的漂亮值为这个排列全部的区间最大公约数之和.然后这个集合的 ...

  3. Linux之系统管理员笔记

    1.查看最近一次启动时间 who -b system boot -- : 2.who命令实现带有“表头”的查询结果 who -H NAME LINE TIME COMMENT root pts/ -- ...

  4. git使用GitHub远程仓库

    1.为什么要使用远程仓库我们知道本地仓库可以很容易地实现版本控制,但在多人开发的情况下,我们需要使用一个服务器作为远程仓库.GitHub是一个开源代码库平台以及版本控制系统. 2.GitHub仓库创建 ...

  5. iOS开发Swift篇—（七）函数

    iOS开发Swift篇—(七)函数 一.函数的定义 (1)函数的定义格式 1 func 函数名(形参列表) -> 返回值类型 { 2 // 函数体... 3 4 } (2)形参列表的格式 形参名 ...

  6. 关于C与python交互设想及文章汇总

    gui: gtk by c 后台: python Python实例浅谈之三Python与C/C++相互调用 Python 与 C/C++ 交互的几种方式 C语言 + GTK3+ Visual Stud ...

  7. vue2.0项目的环境配置以及有哪些的坑

    npm run dev项目运行:$ git pull origin master 更新代码项目的提交代码git push -u origin master 这里就开始准备提交到网络上了 项目的地址gi ...

  8. xcode6 dyld_sim is not owned by root

    如果运行复制过来的xcode可能会这个提示,xcode6 dyld_sim is not owned by root解决方法打开终端 输入sudo xcode-select -switch /Appl ...

  9. [I2C]pca9555应用层测试代码

    注意点: 如果在设置I2C_SLAVE的时候,提示device_busy,可以使用I2C_SLAVE_FORCE, 在驱动里面二者对应同一个case语句 应用层可以调用接口:i2c_smbus_wri ...

  10. php7 安装扩展

    安装mongodb扩展 前提:安装好php7,位置:/usr/local/php 方法一: /usr/local/php7/bin/pecl install mongodb service php-f ...