<!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. 2004-输入一个百分制的成绩t，将其转换成对应的等级

    ,具体转换规则如下: 90~100为A; 80~89为B; 70~79为C; 60~69为D; 0~59为E; 如果输入数据不在0~100范围内,请输出一行:“Score is error!”. 这题 ...

  2. canvas圆形进度条

    通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...

  3. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  4. sharepoint获取exchange邮箱报错：该帐户无权模拟所请求的用户

    现象: sharepoint获取exchange邮箱报错:该帐户无权模拟所请求的用户 处理办法: 1.Open the Exchange Management Shell 2.输入: New-Mana ...

  5. UIlable 属性详用

    我的好朋友给我制定了一个新的学习方法,从新的看每个控件,去了解他的每个属性,方法来让自己对oc的认识更加充实 今天重新认识一下UILable 的属性lable的阴影设置: 阴影的偏移量是以lable中 ...

  6. Matlab2014下载和破解方法，以及Matlab很好的学习网站

    ISO镜像下载地址链接: http://pan.baidu.com/s/1i31bu5J 密码: obo1  单独破解文件下载链接: http://pan.baidu.com/s/1c0CGQsw 密 ...

  7. 听说你会打地鼠（动态规划dp）

    题目来源:https://biancheng.love/contest-ng/index.html#/41/problems G 听说你会打地鼠 时间限制:300ms   内存限制:65536kb 题 ...

  8. C++ 构造函数中调用虚函数

    我们知道:C++中的多态使得可以根据对象的真实类型(动态类型)调用不同的虚函数.这种调用都是对象已经构建完成的情况.那如果在构造函数中调用虚函数,会怎么样呢? 有这么一段代码: class A { p ...

  9. node.js之看懂package.json依赖库版本控制

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉.node.js依赖库的版本控制 一般node.js项目会依赖大量第三方module, 那么如何控制modu ...

  10. MYSQL界面操作系统之phpMyAdmin

    linux下: 需要PHP环境支持,安装PHP自行百度 下载linux-phpMyAdmin,并解压 php -S 127.0.0.1:8081 -t phpMyAdmin/