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制作 ...
随机推荐
- element 点击切换按钮的颜色
1.html <el-button-group label="时间"> <el-button @click="seeHour" :type=& ...
- uva658 dijkstra+状态压缩
题目大意: 假定有n个潜在的bug和m个补丁,每个补丁用长为n的字符串表示.首先输入bug数目以及补丁数目.然后就是对m 个补丁的描述,共有m行.每行首先是一个整数,表明打该补丁所需要的时间.然后是两 ...
- linux,进行批量下载文件操作
wget -i url.txt -P ./Photo 批量下载图片(一般是某个相册的图片) 首先先得到一张图片的地址如:www.example.com/pic/001.jpg 同相册的图片地址会有一 ...
- 解决Addin开发不能断点调试的问题
ArcMap或CAD在调试C#二次开发的插件的时候,在一些情况下不能正常进入到断点中,原因是debugger type不对应. eg. 右键单击Solution Explorer,选择Add-> ...
- three.js低版本添加文字(如71版本)
研究了半天,最后终于加载成功了,记录一下three.js 71版本的文字加载,下面开始整个过程 首先,将ttf字体转换成js文件 源码版: https://github.com/gero3/facet ...
- 深入理解Magento – 第三章 – 布局,块和模板
深入理解Magento 作者:Alan Storm 翻译:Hailong Zhang 第三章 – 布局,块和模板 我们接着研究Magento.根据我们第二章讲的Magento MVC的架构,我们接下来 ...
- Luogu P2269 [HNOI2002]高质量的数据传输
这题给大家提供一下思路~ (为不想贴代码找借口) 声明:两个思路都是正确的,并且都AC了.(逃) 总体布局 求传输失败率\(1-\prod(1-p_{i})\)最小就是求 传输成功率\(\prod(1 ...
- 可持化永久树 的 STL ( rope )
rope 的基本操作 #include <ext/rope> using namespace __gnu_cxx; ]; rope<int> x; rope<int> ...
- Java学习之集合(List接口)
List特有的常见方法:有一个共性特点:都可以操作角标 1.添加 void add(int index, E element); void addAll(int index, collection& ...
- Windows的安全模型
1. 安全身份 Windows的安全模型是以用户为线索的,用户的身份是在登录系统时验证的. 除了用户外,还可以有一些特殊实体需要拥有安全的身份,以便进行验证,比如groups, domain等等. W ...