@keyframes mymove{
    0%{top: 0;left: 0;transform:rotate(50deg);}
    10%{top: 100px;left: 50px;transform:rotate(80deg);}
    20%{top: 300px;left: 40px;transform:rotate(-50deg);}
    30%{top: 400px;left: 200px;transform:rotate(150deg);}
    40%{top: 700px;left: 300px;transform:rotate(350deg);}
    100%{top: 200px;left: 50px;transform:rotate(160deg);}
}
.circle{width: 200px;height: 150px;background: olive;margin: 0 auto;position: relative;}
.circle{
    -webkit-animation: mymove 5s ;
    -o-animation: mymove 5s ;
    animation: mymove 5s ;
}

注意:要运动起来很多时候要给动画元素一个相对定位属性才能动起来,如果不加position:relative;属性,则left和top等位移属性值将没有效果

<div class="circle"></div>

最简化模型2——css3分阶段动画效果(经过实测)之转动的div的更多相关文章

  1. 最简化模型——css3分阶段动画效果(经过实测)

    body {    background: #dcdcdc;    -webkit-animation: colorin 5s; /* chrome调用属性 */    animation: colo ...

  2. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  3. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  4. 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  5. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  6. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  7. css3中的动画效果

    css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. CSS3中的动画效果-------Day72

    还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...

  9. css3 鼠标悬浮动画效果

    CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

随机推荐

  1. apt

    今天单元测试看到巨长字符串被加了很多引号,想起以前可以用跳脱符断行,试了不行,google说java7可以,我操. https://github.com/benelog/multiline/wiki/ ...

  2. 让shell 变得容易理解

    1.重建你的语义模型(简单语义模型)2.变量,参数和方法命名3.测试用例4.足够的组块

  3. CASpringAnimation

    iOS9新出现的 /** Subclass for mass-spring animations. */ @interface CASpringAnimation : CABasicAnimation ...

  4. 黄聪:基于Asp.net的CMS系统We7架设实验(环境WIN7,SQL2005,.NET3.5)(初学者参考贴)

    http://www.cnblogs.com/huangcong/archive/2010/03/30/1700348.html

  5. IE6里面display:inlineblock使得块元素成行排列,没用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. HaiHongOJ 1003 God Wang

    题目连接:http://oj.haihongblog.com/problem.php?id=1003 线段树维护区间最小值,并且求解下标 #include <stdio.h> #inclu ...

  7. Qt5:QSystemTrayIcon类实现程序托盘图标

    windows下,在许多应用程序中都会实现一个托盘图标,用于隐藏应用程序窗口时还能对该应用程序进行简单的操作,例如 QQ ,renren等程序 那么,在Qt中,如何实现呢? 这就要用到Qt提供的 QS ...

  8. PAT (Advanced Level) 1024. Palindromic Number (25)

    手动模拟加法高精度. 注意:如果输入数字的就是回文,这个时候输出0步. #include<iostream> #include<cstring> #include<cma ...

  9. Android开发:组播(多播)与广播

    近期由于需要编写能够使同一局域网中的Android客户端与PC端进行自动匹配通信功能的程序,学习并试验了JAVA组播与广播的内容,记录一些理解如下: 一.组播(多播) 背景知识:组播使用UDP对一定范 ...

  10. Quick Cocos2dx Http通讯

    服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...