<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script>

             window.onload=function(){

                 var arr=[-,,-,];

                 var i=;

                 box.onclick=function(){

                 var ready=false;

                 i++;

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

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

                 oH.appendChild(oS);

                   oS.innerHTML=

                     '@keyframes rotate{'+

                     '0%{'+

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

                     '}'+

                     '100%{'+

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

                     '}'+

                     '}';

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

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

                     if(ready)return;

                     ready=true;

                     document.getElementsByTagName('head')[].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>

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

  1. css3高级运动keyframes

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

  2. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  3. 如何方便的控制css3动画开始时间点与持续时间

    一般我们在控制css3 animate动画时可以通过简写以减少代码量,只要在需要动画的元素上追加一下类名就可以了,如下例子 /*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-a ...

  4. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  5. js、css3实现图片的放大效果

    今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mous ...

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

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

  7. SlimerJS – Web开发人员可编写 JS 控制的浏览器

    SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器.它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机 ...

  8. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  9. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

随机推荐

  1. SqlServer性能优化 提高并发性能（八）

    并发访问: 当多个线程访问同一个资源,会产生并发性问题 并发控制与处理: 乐观并发控制:一种方式是"后来的更新者获胜"   这意味着先来的用户提交的值会在没有察觉的情况下丢失. 为 ...

  2. keyFile 巩固练习

    系统 : Windows xp 程序 : noodles-crackme2 程序下载地址 :http://pan.baidu.com/s/1mhJ4Ems 要求 : 编写KeyFile 使用工具 : ...

  3. 12、c#中事务及回滚

    public void UpdateContactTableByDataSet(DataSet ds, string strTblName) { try { SqlDataAdapter myAdap ...

  4. Javascript 事件对象（六）事件默认行为

    事件默认行为: 阻止默认事件普通写法:return false;屏蔽右键菜单 :  oncontextmenu <!DOCTYPE HTML> <html> <head& ...

  5. Deactivate .NET refector

    8.5版本用注册机注册时手快成Standed版本,搞错......,能否Deactivated,发现要联网..... 接下来查找.net reflector 在位置%UserProfile%\AppD ...

  6. 深入了解C#中的静态变量和静态构造函数

    深入的剖析C#中静态变量和静态构造函数: 在日常的程序开发过程经常会使用到静态变量,众所周知,静态变量时常驻内存的变量,它的生命周期是从初始化开始一直到Application结束.但是,我们经常会忽略 ...

  7. mysql max_allowed_packet

    系统linux > show global max_allowed_packet; >set global max_allowed_packet=1024*1024: 退出mysql,重启 ...

  8. libevent之丢失header问题

    本文为原创,转载请注明:http://www.cnblogs.com/gistao/ 背景 分享一个hhvm使用http server方式来处理请求的问题及对应的patch.hhvm3+版本支持fas ...

  9. [c++] vector的使用

     }     {      vec.push_back(value);  }     {      vector<     vector<,);       vector<, sec ...

  10. java 环境配置 及java 历史

    知识点概括:1 Java 的历史                              2 JDK 的配置                              3 文件的编译与执行     ...