<!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. emberjs初学记要

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...

  2. vh属性-- 一个永远垂直居中的弹出框

    下面的demo,无论浏览器大小如何改变,滚动条是否滚动,弹出框永远水平垂直居中 <html> <head> <title></title> </h ...

  3. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  4. C++语言-02-函数

    普通函数 C++是在C语言的基础上增加了面向对象特性的语言,是C语言的超集 C++中的普通函数与C语言中的普通函数具有类似的性质.请参照以下博客:C语言-04-函数 与类相关的函数 C是一种OOP语言 ...

  5. 多线程基础（五）NSThread线程通信

    5.多线程基础 线程间通信   什么叫线程间通信 在一个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信   线程间通信的体现 1个线程传递数据给另一个线程 在1个线程中执行完特定任务后, ...

  6. 五种开源协议的比较(BSD，Apache，GPL，LGPL，MIT)

    当Adobe.Microsoft.Sun等一系列巨头开始表现出对”开源”的青睐时,”开源”的时代即将到来!现今存在的开源协议很多,而经过Open Source Initiative组织通过批准的开源协 ...

  7. redis-集群（cluster）扫盲篇（一）

    什么是redis的集群 按我个人的理解,redis集群就是实现多个redis节点之间进行数据的共享. 集群有什么好处: 将数据自动split到多个节点进行存储. 当集群中的一部分节点失效或者无法进行通 ...

  8. PL/SQL之--存储过程

    一.存储过程 存储过程是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它.oracle可以把PL/SQL程序储存在数 ...

  9. oracle表空间相关

    数据库被划分为若干个表空间,每个表空间内保存一组相关的逻辑对象.每个表空间由一个或者多个数据文件组成.oracle中的数据逻辑上存储在表空间里,物理上存储在属于该表空间的数据文件里.表空间是用户和物理 ...

  10. android中progress进度条的使用

    activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...