<!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. Windows平台下PHP环境搭建

    在Windows平台上搭建PHP的开发环境可以下载WAMP(Windows.Apache.MySQL.PHP的首字母缩写)集成化安装包.这样就不需要单独安装Apache.MySQL和PHP了. 这款软 ...

  2. 利用BeanUtils在对象间复制属性

    commons-beanutils是jakarta commons子项目中的一个软件包,其主要目的是利用反射机制对JavaBean的属性进行处理.我们知道,一个JavaBean通常包含了大量的属性,很 ...

  3. python数据结构与算法——哈希表

    哈希表 学习笔记 参考翻译自:<复杂性思考> 及对应的online版本:http://greenteapress.com/complexity/html/thinkcomplexity00 ...

  4. A session of Log Collect, Retrieval and Analysis using ELK Stack

    Motivation 运维过程中对问题的定位往往需要跟踪和定位日志.分布式和弹性计算的引入,使得日志的定位和分析变得越发复杂. 本次实践主要的目的是考察现有成熟的日志收集.检索和分析方案:Kafka+ ...

  5. MyEclipse JAX-WS Web Service

    在Myeclipse8.5下开发Web service程序,目前系统支持的开发框架有3个,JAX-WS,REST(JAX-RS),XFire.其中系统建议不要使用XFire 的框架,可能是要被淘汰了( ...

  6. Myeclipse非正常关闭出现问题

    Could not create the view: An unexpected exception was thrown. 解决办法: 关闭myeclipse 原来工作空间的.metadata文件夹 ...

  7. aes rsa加密

    aes在加密时,若加密字符串的长度不是16,则会在后面加0x00补足16位,所以在解密后还应该去除0x00 小于16字节的原文会得到16字节长度的密文,小于32字节的原文会得到32字节长度的密文,大于 ...

  8. 转：仿QQ长按弹出功能菜单

    android app普遍常用的弹出上下文菜单是列表式的.QQ列表,在上方弹出冒泡效果菜单,如图 这里讲解一下如何写出这个效果: 图片资源:两张图片,可以拼接成如上效果. 首先,我们需要写布局文件:  ...

  9. php 把数字1-1亿换成汉字表述，例如 150 转成 一百五十

    /* 额,重新修改了下.现在估计没什么问题了.... */ 直接上实例 写到 千亿上了. /** * @author ja颂 * 把数字1-1亿换成汉字表述,如:123->一百二十三 * @pa ...

  10. HDU 1026 Ignatius and the Princess I（带路径的BFS）

    http://acm.hdu.edu.cn/showproblem.php?pid=1026 题意:给出一个迷宫,求出到终点的最短时间路径. 这道题目在迷宫上有怪物,不同HP的怪物会损耗不同的时间,这 ...