风车转动代码

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <style type="text/css">
         /*创建动画名称*/
         @keyframes rotate{
             0% {
                 transform:rotate(0deg);/*旋转*/

                 /*matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。有问题需请教老师*/
                 /*-webkit-transform:matrix(0,0.5,0,10,20,20);*/
             }
             100%{
                 /*旋转*/
                 transform:rotate(360deg);
             }
         }
         img:hover{
             /*
             @keyframes 规定动画。
             animation 所有动画属性的简写属性,除了 animation-play-state 属性。
             animation-name 规定 @keyframes 动画的名称。
             animation-duration 完成一个周期所花费的秒或毫秒。默认是 0。
             animation-timing-function 规定动画的速度,默认是 "ease" 匀速是linear。
             animation-delay 规定动画何时开始。默认是 0。
             animation-iteration-count 规定动画被播放的次数,默认是 1,不限infinite。
             animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal",逆向alternate。
             animation-play-state 规定动画是否正在运行或暂停。默认是 "running",停止paused。
             animation-fill-mode 规定对象动画时间之外的状态。
              * */

             /*animation-name: rotate;
             animation-duration: 2s;
             animation-timing-function: linear;
             animation-delay: 0s;
             animation-iteration-count: infinite;
             animation-direction: normal;
             animation-play-state: running;*/

             /*animation 属性值 统一语法*/
             animation:rotate 1.5s linear 0s infinite normal running;
         }
         img{
             animation-play-state:paused;
             width: 500px;
             height: 500px;
         }

         </style>
     </head>
 <body>
     <img src="img/fengche2.png">
 </body>
 </html>

风车转动效果

一些css3的特效 javascript的window对象 定时器 延时器等ing...的更多相关文章

  1. JavaScript: 高级技巧: window 对象也可以添加自定义属性

    JavaScript: 高级技巧: window 对象也可以添加自定义属性 例如 window.ntName = 'a';例如 window.ntXw = top; 优点是, window 无须等加载 ...

  2. javascript之window对象

    window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScript中的任何一个全局函数或变量都是wi ...

  3. javascript中window对象 部分操作

    <!--引用javascript外部脚本--> <script src="ss.js"></script> <script> //警 ...

  4. 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象

    JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...

  5. javascript操作window对象

    document.defaultView或全局变量window--获取一个window对象. 1)获取窗体信息 innerHeight.innerWidth--获取窗体内容区域的高度.宽度. oute ...

  6. javascript之Window 对象

    一.说明:他是JS中最大的对象,它描述的是一个浏览器窗口,一般要引用他的属性和方法时,不需要用“Window.XXX”这种形式,而是直接使用“XXX”.一个框架页面也是一个窗口. 二.Window窗口 ...

  7. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

  8. 黑马JavaScript学习一 BOM之Window对象定时器功能

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

  9. JavaScript 学习(1)--window对象

    JavaScript 学习--Window对象 window对象方法 1.1 创建新窗体 //窗体打开 var newWindow=Window.open("default.html&quo ...

随机推荐

  1. 复习java7 集合的底层实现理解

    1.ArrayList 特点:查询快,增删慢,可以重复,无序 实现:底层是用数组实现的,在添加数据的时候,当数组已经满了,会扩容,默认增加1.5倍的原数组长度,并将旧的数组数据拷贝到新的数组上. 2. ...

  2. Oracle odi 数据表导出到文件

    最近新客户要求,以EXCEL数据方式,将数据表的内容,通过AS2协议传输到客户那边,本来打算使用存储过程直接输出EXCEL,但一想,ODI这么强大的工具应该可以直接进行转换,所以参考了一下官方标准文档 ...

  3. 使用FormData,进行Ajax请求并上传文件

    前段时间做了个手机端的图片上传,为了用户体验,用ajax交互,发现了FromData对象,这里有详细解释https://developer.mozilla.org/zh-CN/docs/Web/API ...

  4. XTU 1245 Hamiltonian Path

    $2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$C$题 简单题. 注意题目中给出的数据范围:$1 \le ai < bi \le n$,说明这是一个有向无环图,并且哈密顿路一定是$1 \ ...

  5. 嵌入式系统基础知识(一): 系统结构和嵌入式Linux

    目录 一. 嵌入式体系结构 二. 开发过程中的分工 三. 嵌入式软件体系结构 四. 嵌入式Linux 一. 嵌入式体系结构 <嵌入式系统设计师教程>这本书的前三章脉络很清晰, 按照嵌入式系 ...

  6. google 技巧

    inurl: 用于搜索网页上包含的URL. 这个语法对寻找网页上的搜索,帮助之类的很有用. intext: 只搜索网页部分中包含的文字(也就是忽略了标题,URL等的文字). site: 可以限制你搜索 ...

  7. 【Python】Python中对象管理与垃圾回收中两个很有意思的问题

    再Python中是利用引用计数来实现对象管理和垃圾回收的,即其他对象引用该对象时候,其引用计数加1,反之减1,当引用计数为0时候,被垃圾收集器回收. Python解释器对对象以及计数器的管理分为以下两 ...

  8. c:set 存值

    <c:forEach items="${appoint}" var="appoint"> <c:set var="begin&quo ...

  9. Linux下服务器环境的搭建和配置之一——Apache篇

    最近一个多月(2016-06-20开始至今),一直在忙海外广告平台FAQ系统的开发,既要负责服务器环境的搭建,又要写前端,还要写后台和数据库,甚至还要考虑产品需求和设计.所以是一个很大的挑战,对自身也 ...

  10. rte_mempool内存管理

    DPDK以两种方式对外提供内存管理方法,一个是rte_mempool,主要用于网卡数据包的收发:一个是rte_malloc,主要为应用程序提供内存使用接口.本文讨论rte_mempool.rte_me ...