最简化模型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 ...
随机推荐
- C++ 输出Cstring遇见的奇葩问题
先上代码 // webConteng.cpp : Defines the entry point for the console application. // #include "stda ...
- 母亲的牛奶(milk)
母亲的牛奶(milk) 题目描述 农民约翰有三个容量分别是A.B.C升的桶,A.B.C分别是三个从1到20的整数,最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另一个桶中,直 ...
- 热门IOS 第三方库
综合github上各个项目的关注度与具体使用情况,涵盖功能,UI,数据库,自动化测试,编程工具等类型,看完,还敢自称”精通iOS开发”吗? https://github.com/syedhali/EZ ...
- 【百度地图开发之二】基于Fragment的地图框架的使用
写在前面的话: [百度地图开发之二]基于Fragment的地图框架的使用(博客地址:http://blog.csdn.net/developer_jiangqq),转载请注明. Author:hmji ...
- 磁盘寻道时间算法之----------------SCAN算法和最短寻道时间优先调度算法
若干个等待访问磁盘者依次要访问的柱面编号为:80,40,74,14,60,31,61,假设每移动一个柱面需要4毫秒时间,移动到当前位于35号柱面,且当前的移动方向向柱面号增加的方向.请计算: (1)若 ...
- PAT (Advanced Level) 1078. Hashing (25)
二次探测法.表示第一次听说这东西... #include<cstdio> #include<cstring> #include<cmath> #include< ...
- db2 sqlcode
DB2错误信息(按sqlcode排序) sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被 ...
- 个人学习FPGA的初步过程
对于FPGA,完全是从零开始学习,简单讲述一下我个人学习FPGA的经历吧: 没有开发板的日子.说真的要我掏腰包买开发板觉得是一件非常奢侈的事情.理由1:现成的东西,背后影藏诸多诡异的事情我们是无法体会 ...
- 红黑树(C#)
红黑树C#算法. 在线javascript演示地址:http://sandbox.runjs.cn/show/2nngvn8w using System; using System.Collectio ...
- acm--统计错误数
题目描述 题目地址:http://www.nowcoder.com/practice/67df1d7889cf4c529576383c2e647c48?tpId=49&tqId=29276&a ...