风车转动代码

 <!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. android studio 导入外部库文件，以及将项目中module变成library引用依赖

    一:导入如百度地图等的外部类. 步骤:1.首先 将androidstudio项目显示切换到 project 状态显示项目 2.然后添加.jar文件,将所有的.jar文件放入libs文件夹内(libs文 ...

  2. Duilib使用wke显示echarts

    不得不说wke是个简洁好用的浏览器内核.网上很多大神已经把wke嵌入到duilib中了,先感谢他们辛勤的工作.这里通过wke吧C++的数据在ECharts上美观的显示出来.借鉴前人,将ECharts进 ...

  3. Android之HandlerThread

    HandlerThread详解 1 HandlerThread基本原理 HandlerThread继承自Thread,它是一种可以使用Handler的Thread.它的实现很简单,就是在run方法中通 ...

  4. hadoop，yarn和vcpu资源配置

    Hadoop  YARN同时支持内存和CPU两种资源的调度(默认只支持内存,如果想进一步调度CPU,需要自己进行一些配置),本文将介绍YARN是如何对这些资源进行调度和隔离的. 在YARN中,资源管理 ...

  5. javascript variables 变量

    一,调试方法: 1.document.write();       直接在网页中显示. 2.alert();                       弹窗显示. 3.console.       ...

  6. Hadoop无法上传文件查找原因

    部署了集群,上传测试文件到HDFS文件系统的时候出现问题.could only be replicated to 0 nodes, instead of 1,如下图所示: 度娘寻找解决方案: 博客链接 ...

  7. ActiveMQ in Action(7) - Wildcards

    关键字: activemq 2．6．7 Wildcards    Wildcards用来支持联合的名字分层体系(federated name hierarchies).它不是JMS规范的一部分,而是A ...

  8. C#中“类似GridView等控件”的前台显示与后台数据变化之间的关系

    最近用dev的treelist,gridcontrol等控件,这些控件显示数据都需要进行DataTable等数据源的绑定,而经理又要求可以随时更改其中的内容,刚开始总是不断的刷新控件.更新控件的数据源 ...

  9. java调用wsdl xfire和cxf两种方式

    xfire 如下: String spID = ""; String password = ""; String accessCode = "&quo ...

  10. react使用map生成的元素，key的设定不对导致每次删除都删除最后一个

    假设 你的key设置为map中的索引,假设为0,1,2(原dom树),现在你用splice删除掉1,重新渲染时,还是会按map索引按顺序渲染为0,1(新dom树),由于react渲染机制是比较的key ...