<!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. android 打开各种文件（setDataAndType）转:

    android 打开各种文件(setDataAndType) 博客分类: android-->非界面 android 打开各种文件 setDataAndType action动作  转自:htt ...

  2. Qt线程(4) 降低线程占用CPU

    问题描述: 一般将计算量大的处理过程单独放置到一个单独的线程处理,因此很有可能你的处理过程需要while(1)或类似的操作. 也因此很有可能造成线程在处理时计算机CPU占用过高的情况. 解决办法: 降 ...

  3. TCP SYN扫描学习笔记

    1.TCP SYN包扫描主机状态的原理:tcp协议规定,当目标主机收到一个tcp syn 包时,若目标主机处于开放状态,会返回给源主机一个tcp ack 包(目的端口开放),或者向源主机发送一个tcp ...

  4. id生成策略 id工具类

    import java.util.Random; /** * 各种id生成策略 * <p>Title: IDUtils</p> * <p>Description: ...

  5. python操作

    用python做OI题实在不是一个明智的选择 if __name__ == "__main__":相当于c艹的int main(),然而似乎没有也可以? 重定向标准输入输出流:sy ...

  6. js/css在html文档中的引用外部文件方式对比

    包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...

  7. 启动struts2项目出现classnotfound错误

    由于工作需求.需要了解struts2项目,前几天部署了一个struts2的demo,研究url的解析过程,昨天还是好好的,今天修改了一下web.xml文件,然后启动Tomcat就报错,错误如下: 严重 ...

  8. LEETCODE —— Sudoku Solver

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  9. 关于位图读取函数int Load_Bitmap_File的lseek问题。

    事情是这样的,本人在编译3D游戏编程大师技巧中的程序是遇到了一个关于位图读取函数int Load_Bitmap_File的lseek问题. 我使用以下位图读取函数读取位图事报错如下: int Load ...

  10. sql中的跨库查询

    在sql查询时,需要关联2个服务器上的不同数据库,只需要在所需查询的表名前加上服务器地址即可. 例如:在 192.168.0.15,8020的db110库 和 192.168.0.150,8082的d ...