<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

            window.onload=function(){

                var arr=[-45,60,-75,90];

                var i=0;

                box.onclick=function(){

                var ready=false;

                i++;

                var oH=document.getElementsByTagName('head')[0];

                var oS=document.createElement('style');

                oH.appendChild(oS);

                  oS.innerHTML=

                    '@keyframes rotate{'+

                    '0%{'+

                    'transform: rotate('+arr[i%4]+'deg);'+

                    '}'+

                    '100%{'+

                    'transform: rotate(-'+arr[i%4]+'deg);'+

                    '}'+

                    '}';

                box.style.animation='1s rotate linear';

                box.addEventListener('animationend',function(){

                    if(ready)return;

                    ready=true;

                    document.getElementsByTagName('head')[0].removeChild(oS);

                },false);

                console.log(oS.innerHTML);

                };

            };

    </script>

</head>

<body>

    <div id="box" style="background:red; width:100px; height:100px; margin:50px auto;"></div>

</body>

</html>

　　

css3高级运动keyframes的更多相关文章

  1. js 控制 css3高级运动 keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3动画（@keyframes和animation的用法）

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  3. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  4. css3中的 @Keyframes

    一.介绍 keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则. ...

  5. css3 实现运动动画 圆与椭圆

    圆: html <div class="demo4"><div></div></div> css .demo4{ width: 20 ...

  6. [Js]高级运动

    一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... ...

  7. css3 动画运动路径

    1.cubic-bezier贝塞尔曲线CSS3动画工具 http://www.xuanfengge.com/cubic-bezier-bezier-css3-animation-tools.html ...

  8. CSS3高级

    一.学习目标 二.box-sizing属性 语法:box-sizing: content-box|border-box|inherit box-sizing属性的用法: box-sizing属性可以为 ...

  9. CSS3高级选择器

    CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 <!DOCTYPE ...

随机推荐

  1. mac下用ruby安装sass && webstorm下给scss文件添加watch

    1.安装rvm 先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具,它将帮你安装好 Unix 环境需要的开发包 sudo curl -L https ...

  2. Atitit.病毒木马程序的感染 传播扩散 原理

    Atitit.病毒木马程序的感染 传播扩散 原理 1. 从木马的发展史考虑,木马可以分为四代 1 2. 木马有两大类,远程控制  vs  自我复制传播1 3. 自我复制2 3.1. 需要知道当前cpu ...

  3. 并查集(Disjoint Set)

    在一些有N个元素的集合应用问题中,我们通常是在开始时让每个元素构成一个单元素的集合,然后按一定顺序将属于同一组的元素所在的集合合并,其间要反复查找一个元素在哪个集合中.这一类问题其特点是看似并不复杂, ...

  4. IOS GCD 浅析

     一.简单介绍 1.队列的类型:      1.1主队列:main queue 主线程队列,更新UI的操作.是一个串行的队列,串行队列每次只处理一个任务.      1.2系统创建的并发队列:glob ...

  5. android media server 解析1-media player service 结构部分

    下面为media server注册的四个服务之一:MediaPlayerService的结构图 1.图中没有MediaPlayerService的代理对象BpMediaPlayerService部分, ...

  6. Cocos2d入门--3--小球运动

    本章直接上源代码.内容不难,主要就是 HelloWorldScene.h文件: #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H_ ...

  7. new与malloc的区别

    看起来,它们的不同只是new比malloc用起来更方便而已.仅仅是这样吗?不是吗? 1 来源不同: 1)new/delete是C++中的操作符,而malloc/free是C中的标准库函数,需要库文件支 ...

  8. Linux平台卸载MySQL总结【转】

    最近用到了mysql主从,顺手看到了这篇文章,拿出来分享一下. 转自:http://www.cnblogs.com/kerrycode/p/4364465.html 潇湘隐者 RPM包安装方式的MyS ...

  9. sql2008备份集中的数据库备份与现有的xxx数据库不同解决方法

    原文链接:http://wncbl.cn/posts/1993c22/ 问题描述 今天在配置一个 ASP 站点时,导入以前的数据库备份文件,提示:sql2008备份集中的数据库备份与现有的xxx数据库 ...

  10. Handler与Looper，MessageQueue的关系

    总结一下Handler与Looper,MessageQueue的关系,并实现自定义与子线程相关的Handler. 一.Handler与Looper,MessageQueue的关系 它们之间的关系其实就 ...