做这个案例之前首先要大概了解CSS的transform的属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

看看效果图

打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。

参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得单调）

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动画</title>

        <link rel="stylesheet" type="text/css" href="css/animate1.css"/>

    </head>

    <body>

        <div></div>

            <div id="one">

                <div class="sj">

                </div>

                <div class="ye">

                </div>

                <div class="ye1">

                </div>

                <div class="re">

                </div>

                <div class="blue">

                </div>

                <div class="blue1">

                </div>

                <div class="green">

                </div>

                <div class="green1">

                </div>

        </div>

            <div id="mg">

            </div>

            <div>

                <!--<img src="img/1.jpg" id="img"/>-->

        </div>

    </body>

</html>

css:(还有更加简单的方法画出这个风车的，我这里复杂了一点，比较笨重，不够简洁)

*{

    margin:;

    padding:;

}

#s{

    float: left;

}

#one:hover{

    animation:run 0.6s linear infinite;

}

@keyframes run{

from{

    transform: rotate(360deg);

    }

to{

    transform: rotate(0deg);

    }

}

.sj{

    margin-top: 5px;

    transform: rotate(-46deg);

    position: absolute;

    top:14px;

    left: -49px;

    float: left;

    width:;

    height:;

    z-index:;

    border: 50px solid lightcoral;

    border-color:lightcoral transparent  transparent   transparent  ;

}

.ye{

    transform: rotate(0deg);

    position: absolute;

    left: 0px;

    top:5px

    float: left;

    width:;

    height:;

    border: 80px solid #D9B300;

    z-index:;

    border-color: transparent  transparent   transparent  #D9B300;

}

.ye1{

    transform: rotate(0deg);

    position: absolute;

    left: -80px;

    top:78px;

    float: left;

    width:;

    height:;

    z-index:;

    border: 80px solid orange;

    border-color: transparent orange transparent   transparent ;

}

.re{

    transform: rotate(-46deg);

    position: absolute;

    left: 21px;

    top: -61px;

    float: left;

    z-index:;

    width:;

    height:;

    border: 59px solid brown;

    border-color: transparent  transparent   transparent brown;

}

.blue{

    transform: rotate(0deg);

    position: absolute;

    left: 80px;

    top:-79px;

    float: left;

    width:;

    height:;

    z-index:;

    border: 80px solid cornflowerblue;

    border-color:  transparent  transparent   transparent cornflowerblue;

}

.blue1{

    transform: rotate(-44deg);

    position: absolute;

    left: 102px;

    top: 23px;

    float: left;

    width:;

    height:;

    z-index:;

    border: 58px solid lightblue;

    border-color: lightblue transparent  transparent   transparent ;

    animation:gg 1s linear infinite;

}

.green{

    transform: rotate(0deg);

    position: absolute;

    left: 80px;

    top: 80px;

    z-index:;

    float: left;

    width:;

    height:;

    border: 81px solid #01814A;

    border-color: #01814A transparent  transparent   transparent ;

    z-index:;

}

.green1{

    transform: rotate(-45deg);

    position: absolute;

    top:103px;

    left: 23px;

    float: left;

    width:;

    height:;

    border: 57px solid seagreen;

    border-color:  transparent  seagreen transparent   transparent ;

    z-index:;

}

#mg{

    background: salmon;

    width: 15px;

    height: 300px;

    border-radius: 8px;

    position: absolute;

    top:220px;

    left:680px;

    z-index:;

}

#one{

    margin: 150px auto auto auto;

    width: 162px;

    transform: rotate(-45deg);

    height: 162px;

    line-height: 168px;

    text-align: center;

    position: relative;

    z-index:;

    animation:run 9s linear infinite;

}

#img{

    position: relative;

    top:-50px;

    left: 522px;

    z-index: -1;

}

css制作旋转风车（transform 篇）的更多相关文章

  1. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  2. CSS3制作旋转的小风车

    制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...

  3. requestAnimationFrame制作动画：旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  4. html5 requestAnimationFrame制作动画：旋转风车

    详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...

  5. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  8. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  9. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

随机推荐

  1. 关系型数据库---MYSQL---系统学习

    1.概述 1.1 mysql数据库是一种  客户端/服务器体系  的 数据库系统: 服务器部分 在启动运行后没有人机界面,所以终端用户  无法直接使用MySQL: 对MySQL数据库进行访问.操作  ...

  2. 特种设备TSG 认证流程

    特种设备许可,也叫安全注册(原为AZ安全注册认可),现为TS.国家为了防止和减少事故,保障人民群众生命和财产安全,促进经济发展而强制实施的安全监察.它的作用相当于欧盟的“CE”认证,但比“CE”认证更 ...

  3. python -jieba 安装+分词+定位

    1.jieba 库安装 方法1:全自动安装(容易失败):easy_install jieba 或者 pip install jieba / pip3 install jieba 方法2:半自动安装(推 ...

  4. magento结构解析

    Magento 模块 模块( module )是 Magento 的核心.站点上的任何一个动作( action ),无论是在前台和还是在后台的每一个操作都是通过模块来实现的.模块是可以视为一个容器,它 ...

  5. delphi 设备函数GetDeviceCaps函数

    {说明:以下内容来源于网络,修改多处错误所得 2019.10.04 } GetDeviceCaps 函数功能:该函数检索指定设备的设备指定信息.该函数经常用在操作打印机等设备中.函数原型:int Ge ...

  6. Delphi ResourceString的用法

    在Delphi编程的那段“古老”的日子里(就是在版本4之前),在程序中使用字符串有两个基本的方法.你可以使用字符串将它们嵌入到源程序中,例如: MessageDlg( 'Leave your stin ...

  7. SQL LIKE 运算符

    SQL LIKE 运算符 在WHERE子句中使用LIKE运算符来搜索列中的指定模式. SQL LIKE 操作符 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. 有两个通配符与LIKE运 ...

  8. 汇编检测OD代码

    repnz指令说明:重复执行其后面的指令,CX或ECX存放最多比较次数,DI或EDI存放查找表首地址,AL或AX或EAX存放想查找的内容.当(CX或ECX)= 0 或 ZF=1 退出重复,否则,(CX ...

  9. Http头域字段详解

    HTTP(HyperTextTransferProtocol) 是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型.客 ...

  10. oracle主要的动态视图与基表的对应关系

    动态视图 基表 GV$ACCESS x$ksuses,x$kglob,x$kgldp,x$kgllk GV$ACTIVE_INSTANCES x$ksimsi GV$ACTIVE_SESS_POOL_ ...