<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

            window.onload=function(){

                var arr=[-45,60,-75,90];

                var i=0;

                box.onclick=function(){

                var ready=false;

                i++;

                var oH=document.getElementsByTagName('head')[0];

                var oS=document.createElement('style');

                oH.appendChild(oS);

                  oS.innerHTML=

                    '@keyframes rotate{'+

                    '0%{'+

                    'transform: rotate('+arr[i%4]+'deg);'+

                    '}'+

                    '100%{'+

                    'transform: rotate(-'+arr[i%4]+'deg);'+

                    '}'+

                    '}';

                box.style.animation='1s rotate linear';

                box.addEventListener('animationend',function(){

                    if(ready)return;

                    ready=true;

                    document.getElementsByTagName('head')[0].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>

　　

css3高级运动keyframes的更多相关文章

  1. js 控制 css3高级运动 keyframes

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3动画（@keyframes和animation的用法）

    animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...

  3. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  4. css3中的 @Keyframes

    一.介绍 keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面跟着是动画名称加上一对花括号“{…}”,括号中是一些不同时间段样式规则. ...

  5. css3 实现运动动画 圆与椭圆

    圆: html <div class="demo4"><div></div></div> css .demo4{ width: 20 ...

  6. [Js]高级运动

    一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... ...

  7. css3 动画运动路径

    1.cubic-bezier贝塞尔曲线CSS3动画工具 http://www.xuanfengge.com/cubic-bezier-bezier-css3-animation-tools.html ...

  8. CSS3高级

    一.学习目标 二.box-sizing属性 语法:box-sizing: content-box|border-box|inherit box-sizing属性的用法: box-sizing属性可以为 ...

  9. CSS3高级选择器

    CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 <!DOCTYPE ...

随机推荐

  1. Atitit.图片木马的原理与防范 attilax 总结

    Atitit.图片木马的原理与防范 attilax 总结 1.1. 像图片的木马桌面程序1 1.2. Web 服务端图片木马1 1.3. 利用了Windows的漏洞1 1.4. 这些漏洞不止Windo ...

  2. 微信支付redirect_uri参数错误

    在做微信支付的时候,点击提交,出现“redirect_uri参数错误”.经过查找,需要在后台正确设置授权域名.大致步骤如下:1.首先登录微信公众号管理后台2.点击开发者中心3.找到 网页账号—> ...

  3. How-to: disable the web-security-check in Chrome for Mac

    When I try to test one web app in coperate intranet, there is always some error like "Failed to ...

  4. linux终端python自动提示

    linux终端python自动提示 很多时候,在linux下编写python时, 都懒得去vi一个新文件,直接就新开一个终端, 进入python命令行模式,然后就可以写一些测试代码. 不过最悲剧的就是 ...

  5. IOS SDWebImage实现原理详解

    在之前我写过SDWebImage的使用方法,主要是用与获取网络图片,没有看过的朋友可以看看. 这篇文章将主要介绍SDWebImage的实现原理,主要针对于获取网络图片的原理,如果没有第三方我们该怎么去 ...

  6. NSArray,NSMutableArray的三种排序

    int main(int argc, const char * argv[]) { @autoreleasepool { //字符串进行排序 NSArray *arr=@[@"b" ...

  7. 局域网内搭建git

    git简介:请大家参看git官网的介绍 http://git-scm.com/book/zh/v1  还有这位大神的git教程:http://www.liaoxuefeng.com/wiki/0013 ...

  8. yum安装mariadb

    安装mysql yum install mariadb mariadb-server MySQL-python mysql-devel Package MySQL-python-1.2.5-1.ibm ...

  9. 2013MPD上海6.22 PM 陆宏杰：通往卓越管理的阶梯 & 6.23AM Ray Zhang 产品创新管理的十八般武艺

    MPD2天的内容,参加了5个课程,其中2个是管理的,分别是陆宏杰老师的<通往卓越管理的阶梯>和Ray Zhang大师的<产品创新管理的十八般武艺>.他们2个人都谈到了一个关于招 ...

  10. emacs下安装pip

    Ubuntu13.10下安装pip的方法   $ sudo apt-get install python-pip python-dev build-essential  $ sudo pip inst ...