css制作旋转风车(transform 篇)
做这个案例之前首先要大概了解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 篇)的更多相关文章
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
- CSS3制作旋转的小风车
制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{ margin:0; pad ...
- requestAnimationFrame制作动画:旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
- html5 requestAnimationFrame制作动画:旋转风车
详细内容请点击 在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
随机推荐
- ie 图片拉伸
终于发现只要设置img为 height:auto,width:auto,就不会出现这种情况了 img { height: auto; width: auto; }
- Vue学习笔记【4】——Vue指令之v-on
Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> & ...
- nuxt.js 本地开发跨域问题(Access-Control-Allow-Origin)及其解决方案
先运行npm i @gauseen/nuxt-proxy -D 再nuxt.config.js的module.exports 里面添加如下代码 modules:[ '@nuxtjs/axios', / ...
- [ZJOI2010]排列计数 题解
Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic ...
- WdatePicker.js的使用方法 帮助文档 (日历控件)
WdatePicker配置和功能 一.配置 日期范围限制 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配置minDate(最小日期),maxD ...
- json格式化在线工具推荐
现在系统对接基本都采用json格式的报文,杂乱无章的json让人看起来头大,这里推荐一款在线格式化json的工具, 工具地址: http://www.matools.com/json 这个在线Json ...
- 静态栈-------C语言
/***************************************************** Author:Simon_Kly Version:0.1 Date: 20170520 D ...
- rbd_rados命令拷屏
mimic或者luminous rbd_rados sudo mount -t ceph 192.168.7.151:6789:/ /mnt -o name=admin,secret=AQBaPZNc ...
- 技巧&注意事项合集
技巧&注意事项合集 杂项 OI Wiki有很多实用的东西 编程环境 打开Dev-C++中工具-编译选项-代码生成/优化-代码警告-显示最多警告信息的开关,可以检查出一堆傻逼错误 define ...
- POJ 1873 UVA 811 The Fortified Forest (凸包 + 状态压缩枚举)
题目链接:UVA 811 Description Once upon a time, in a faraway land, there lived a king. This king owned a ...