<!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. 一些js小题（一）

    一些js小题,掌握这些对于一些常见的面试.笔试题应该很有帮助: var a=10; function aa(){ alert(a); } function bb(){ aa(); } bb();//1 ...

  2. Form.action传值问题

    通过浏览器地址栏输入url并通过?传递参数请求资源时,?后面的参数叫做 "查询字符串",会触发后台Servlet的doGet(),因为通过浏览器地址栏直接访问的方式是GET方式. ...

  3. 关于ol有序裂变和ul无序列表前面的列表项标记的位置

    使用列表项标记的时候发现其对齐方式竟然从内容开始,于是发现了这个属性可以解决: list-style-position inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐. outsid ...

  4. JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

    今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...

  5. sharepoint 顺序工作流创建

    顺序工作流提供了一系列有组织的步骤,一般情况下,步骤是逐一执行的. 1.新建 > 项目,选择 SharePoint解决方案 > 空项目: 2.部署为场解决方案 3.添加 > 新项,选 ...

  6. Windows环境下利用github快速配置git环境

    在windows环境下利用github客户端我们可以直接拥有可视化的界面来管理工程,当然你也可以选择你喜欢的命令行工具来做.今天我分享一个比较快速的方式来配置git环境. 先去下载github的win ...

  7. android XMl 解析神奇xstream 三： 把复杂对象转换成 xml

    前言:对xstream不理解的请看: android XMl 解析神奇xstream 一: 解析android项目中 asset 文件夹 下的 aa.xml 文件 android XMl 解析神奇xs ...

  8. 【读书笔记】iOS-验证应用内支付的凭证注意事项

    1,简单来说,越狱后的手机由于没有沙盒作为保护,黑客可以对系统进行任意的修改,所以,在支付过程中,苹果返回的已付款成功的凭证可能是伪造的.客户端拿到付款凭证之后,还需要将凭证上传到自己的服务器,进行二 ...

  9. Android线程管理（二）——ActivityThread

    线程通信.ActivityThread及Thread类是理解Android线程管理的关键. 线程,作为CPU调度资源的基本单位,在Android等针对嵌入式设备的操作系统中,有着非常重要和基础的作用. ...

  10. android 短信助手demo

    关于意图Intent: 显式意图:必须指定要激活的组件的完整包名和类名(应用程序之间耦合在一起) 一般激活自己应用的组件的时候采用显式意图 隐式意图:只需要指定动作和数据就可以(好处是应用程序之间没有 ...