<!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. 【LeetCode OJ】Maximum Depth of Binary Tree

    Problem Link: https://oj.leetcode.com/problems/maximum-depth-of-binary-tree/ Simply BFS from root an ...

  2. 最适合和最不适合新手使用的几款 Linux 发行版

    大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...

  3. RaspBMC使用攻略与问题总结

    XBMC最初叫Xbox Media Center,是xbox的游戏控制器,后来移植到其他操作系统 XBMC在v14后改名为Kodi RaspBMC是XBMC在Rasperry PI上定制的linux发 ...

  4. 使用AdvinceInstaller把exe或者msi重新包装成为msi静默安装程序

    最近在学习installShelled打包.net做的软件,其中mysql数据库的静默安装脚本不会写,本人新手勿喷.在不会写脚本的方式下,偶然间看见了这个AdvinceInstaller可以吧.exe ...

  5. isKindOfClass，isMemberOfClass

    - (BOOL)isKindOfClass:(Class)aClass; - (BOOL)isMemberOfClass:(Class)aClass; 特点: 1.isKindOfClass   判断 ...

  6. 在博文中嵌入Javascript代码

    今天吃饭时无聊,突然想到Markdown除了兼容HTML会不会也兼容Javascript,于是博文里除了码文插音乐还可以干点更好玩的事儿了,可以自动修改markdown文件本身,比如说自动修改从Git ...

  7. cocos2d-x iOS真机下载非根目录文件提示下载失败解决办法

    在使用cocos api的Downloader或者AssetsManager下载文件到真机Document目录时,如果是直接下载到document根目录,是没问题的,如果是下载存放到了某个不存在的子目 ...

  8. memcache命中统计

    把memcache.php放在可以访问的位置,默认账户admin,密码admin 参考http://a.linji.cn/2011/12/memcachedphp.txt http://linji.c ...

  9. EF里一对一、一对多、多对多关系的配置

    EF关系规则 参考文章:http://www.cnblogs.com/feigao/p/4617442.html Entity Framework 实体间的关系,一对一,一对多,多对多,根据方向性来说 ...

  10. Log4j的简要概述

    读取配置文件的三种使用方式: 1.Java代码:BasicConfigurator.configure() 2.Java特性:键值对解析(properties文件) PropertyConfigura ...