<!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. 总结之H3C汇聚层交换机认证在线人数展示系统

    前情提要:意外接了老师说的一个小程序,然后计划7天(实际10天)的小项目就冒出来了. (1)时间与工程量.在和老师开始谈具体需求前,我凭感觉猜了猜完成这个小项目的时间.然后,再和老师确定需求后,再回头 ...

  2. HDU 5398 （动态树）

    Problem GCD Tree 题目大意 n个点的无向完全图,标号1~n,每条边u-->v 的权值为gcd(u,v),求其最大生成树,输出最大边权和. n<=10^5,有多个询问. 解题 ...

  3. 前端一：走进HTML

    一:HTML(HyperText Markup Language)介绍 超文本标记语言,标准通用标记语言下的一个应用.“超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.超文本标记语 ...

  4. IIS 发布 异常信息 AspNetInitClrHostFailureModule 的解决办法

    昨天在一个客户那里使用Server 2008服务器配置IIS,都配置好之后竟然出现了错误信息,以前没有遇到过 "AspNetInitClrHostFailureModule",于是 ...

  5. XmlSerializer(Type type, Type[] extraTypes) 内存泄漏

    在使用XmlSerializer进行序列化或者反序列的时候,对于下面的两个构造方法 XmlSerializer(Type)XmlSerializer.XmlSerializer(Type, Strin ...

  6. C++中 vector（容器）的用法

    vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 用法: 1.文件包含: ...

  7. LintCode Min Stack

    用两个stack, 第一个按顺序放所有值,第二个只放当前最小值. 注意: 1. 最小值有多个则都放到两个stack里, 尤其别忘放第二个: 2. pop时若两个stack的最上面值相等则都pop, 不 ...

  8. web安全之xss

    xss:跨站脚本攻击,攻击者,把一段恶意代码镶嵌到web页面,,用户浏览页面时,嵌入页面的恶意代码就会执行,从而到达攻击用户的目的. 重点在于脚本,javascript和actionscript    ...

  9. 99乘法表(bash)

    awk方式: # awk 'BEGIN{for(i=1;i<=9;i++){for(j=1;j<=i;j++){printf j"x"i"="i*j ...

  10. 修改oracle实例名orcl为demo

    修改oracle实例名有六步: 1.sqlplus username/password as sysdba登陆,然后从spfile文件创建pfile文件 :create pfile from spfi ...