<!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. C#双链表

    单链表允许从一个结点直接访问它的后继结点,所以, 找直接后继结点的时间复杂度是 O(1).但是,要找某个结点的直接前驱结点,只能从表的头引用开始遍历各结点.如果某个结点的 Next 等于该结点,那么, ...

  2. SpringMVC之入门

    Spring MVC简介 Spring MVC:Spring MVC也叫Spring Web MVC,属于表现层框架,是Spring中的一份子. Spring MVC执行流程图 第一个SpringMV ...

  3. Asp.net Web.Config - 配置元素 trace

    一.trace的元素的属性 属性 说明 enabled 是否启用应用程序跟踪.为了使用 Trace.axd 查看器,必须启用跟踪.默认情况下,Trace.axd 查看器被添加到httpHandlers ...

  4. Java 网络爬虫获取网页源代码原理及实现

    Java 网络爬虫获取网页源代码原理及实现 1.网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.传统爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL ...

  5. jQuery 遍历 - each() 方法

    定义和用法 each() 方法规定为每个匹配元素规定运行的函数. 提示:返回 false 可用于及早停止循环. 语法 $(selector).each(function(index,element)) ...

  6. drozer安装之夜深模拟器

    首先下载drozer的安装包    可以直接到官网下载:https://labs.mwrinfosecurity.com/tools/drozer/ 安装 解压压缩包其中 setup.exe 为Win ...

  7. java 读写properties

    网速不好:先贴上资料: Java配置文件Properties的读取.写入与更新操作 [Spring] - Property注入 http://www.360doc.com/content/14/073 ...

  8. ThinkPHP 3.2 获取页面运行时间

    在ThinkPHP中,可以通过在config.php中配置'SHOW_PAGE_TRACE' =>true,打开页面调试,实现页面载入时间的显示.但显示在页面右下角TP的LOGO显然不能适用于我 ...

  9. C#中页面之间跳转方法比较

    一直以来,各种跳转方法混用,浑浑噩噩没有仔细去了解过每个跳转方法的区别 1.<a herf="default.asp"></a>  超链接跳转 2.< ...

  10. Java实验三

    20145113 20145102实验三 实验步骤 编码标准 编程标准包含:具有说明性的名字.清晰的表达式.直截了当的控制流.可读的代码和注释,以及在追求这些内容时一致地使用某些规则和惯用法的重要性 ...