做这个案例之前首先要大概了解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: 0;
padding: 0;
}
#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: 0;
height: 0;
z-index: 2;
border: 50px solid lightcoral;
border-color:lightcoral transparent transparent transparent ;
}
.ye{
transform: rotate(0deg);
position: absolute;
left: 0px;
top:5px
float: left;
width: 0;
height: 0;
border: 80px solid #D9B300;
z-index: 2;
border-color: transparent transparent transparent #D9B300;
}
.ye1{
transform: rotate(0deg);
position: absolute;
left: -80px;
top:78px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 80px solid orange;
border-color: transparent orange transparent transparent ;
}
.re{
transform: rotate(-46deg);
position: absolute;
left: 21px;
top: -61px;
float: left;
z-index: 2;
width: 0;
height: 0;
border: 59px solid brown;
border-color: transparent transparent transparent brown;
}
.blue{
transform: rotate(0deg);
position: absolute;
left: 80px;
top:-79px;
float: left;
width: 0;
height: 0;
z-index: 2;
border: 80px solid cornflowerblue;
border-color: transparent transparent transparent cornflowerblue;
}
.blue1{
transform: rotate(-44deg);
position: absolute;
left: 102px;
top: 23px;
float: left;
width: 0;
height: 0;
z-index: 2;
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: 2;
float: left;
width: 0;
height: 0;
border: 81px solid #01814A;
border-color: #01814A transparent transparent transparent ;
z-index: 2;
}
.green1{
transform: rotate(-45deg);
position: absolute;
top:103px;
left: 23px;
float: left;
width: 0;
height: 0;
border: 57px solid seagreen;
border-color: transparent seagreen transparent transparent ;
z-index: 2;
}
#mg{
background: salmon;
width: 15px;
height: 300px;
border-radius: 8px;
position: absolute;
top:220px;
left:680px;
z-index: 0;
}
#one{
margin: 150px auto auto auto;
width: 162px;
transform: rotate(-45deg);
height: 162px;
line-height: 168px;
text-align: center;
position: relative;
z-index: 3;
animation:run 9s linear infinite;
}
#img{
position: relative;
top:-50px;
left: 522px;
z-index: -1;
}
原文地址：https://www.cnblogs.com/LCH-M/p/9334892.html
时间： 2024-07-29 16:07:22