最简化模型2——css3分阶段动画效果(经过实测)之转动的div
@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的更多相关文章
- 最简化模型——css3分阶段动画效果(经过实测)
body { background: #dcdcdc; -webkit-animation: colorin 5s; /* chrome调用属性 */ animation: colo ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- 模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果)
模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- jquery使用CSS3实现文字动画效果插件Textillate.js
Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...
- css3中的动画效果
css3中的animation属性动画效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- CSS3中的动画效果-------Day72
还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动 ...
- css3 鼠标悬浮动画效果
CSS3案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
随机推荐
- apt
今天单元测试看到巨长字符串被加了很多引号,想起以前可以用跳脱符断行,试了不行,google说java7可以,我操. https://github.com/benelog/multiline/wiki/ ...
- 让shell 变得容易理解
1.重建你的语义模型(简单语义模型)2.变量,参数和方法命名3.测试用例4.足够的组块
- CASpringAnimation
iOS9新出现的 /** Subclass for mass-spring animations. */ @interface CASpringAnimation : CABasicAnimation ...
- 黄聪:基于Asp.net的CMS系统We7架设实验(环境WIN7,SQL2005,.NET3.5)(初学者参考贴)
http://www.cnblogs.com/huangcong/archive/2010/03/30/1700348.html
- IE6里面display:inlineblock使得块元素成行排列,没用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HaiHongOJ 1003 God Wang
题目连接:http://oj.haihongblog.com/problem.php?id=1003 线段树维护区间最小值,并且求解下标 #include <stdio.h> #inclu ...
- Qt5:QSystemTrayIcon类实现程序托盘图标
windows下,在许多应用程序中都会实现一个托盘图标,用于隐藏应用程序窗口时还能对该应用程序进行简单的操作,例如 QQ ,renren等程序 那么,在Qt中,如何实现呢? 这就要用到Qt提供的 QS ...
- PAT (Advanced Level) 1024. Palindromic Number (25)
手动模拟加法高精度. 注意:如果输入数字的就是回文,这个时候输出0步. #include<iostream> #include<cstring> #include<cma ...
- Android开发:组播(多播)与广播
近期由于需要编写能够使同一局域网中的Android客户端与PC端进行自动匹配通信功能的程序,学习并试验了JAVA组播与广播的内容,记录一些理解如下: 一.组播(多播) 背景知识:组播使用UDP对一定范 ...
- Quick Cocos2dx Http通讯
服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...