用css3制作简单的小风车

开发工具与关键技术：DW    css3
作者：张华明
撰写时间：2019/1/19

Css3中有着很多有趣的动画，下面跟大家分享一个风车的制作。代码不多，希望你们能够喜欢。

首先在最外面用一个div（class=” box”）封装,设置宽高（具体根据自己的意愿），第一个小div里面的img标签放的是一个背景图片（蓝色的）。

2．制作风车的柱子和叶子。
（1）、柱子的制作：用到了border（边框）来实现，z-index让它浮起来。
z-index的主要功能：确保导航层能覆盖其它控件，实现浮动、导航等设计效果。

（2）、叶子的制作：主要是用的position（定位），相对于包裹它的父级元素box1进行定位，设置样式，这里的ye1指的是第一片叶子（白色矩形），a标签用来制作叶子的炳。在这里只列举一个，后面有详细的代码。

3.制作风车的轴。（中间的圆）这个不难，主要是用到了border-radius(圆角)，不要忘了宽高要一致哦。
在这里插入图片描述
4.效果图如下:

5.详细代码见下方：

<!--html-->

<body>
	<div class="box">
		<div class="img">
			<img src="../images/pr_1.png" alt="">
		</div>
		<div class="zhu"></div>
		<div class="box1">
			<div class="ye1">新<a href=""></a></div>
			<div class="ye2">乐<a href=""></a></div>
			<div class="ye3">快<a href=""></a></div>
			<div class="ye4">年<a href=""></a></div>
		</div>
		<div class="xiaodian"></div>
	</div>
</body>
<!--样式部分-->
<style>
*{
	padding: 0px;
	margin: 0px;
}
.box{
	width: 1519px;
	height: 700px;
	background: #4540AC;
	position: relative;
}
.img{
	width: 100%;
	height: 150px;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.img img{
	width:100%;
	height: 150px;
}
.zhu{
	height: 500px;
	position: absolute;
	bottom: 0px;
left: 45%;
z-index: 10;/*--层次--*/
	border-top: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 350px solid #F2F9F9;
	border-left: 20px solid transparent;
}
.box1{width: 400px;height: 400px;
	position: relative;
	top: 185px;
	left: 33%;
}
.box1:hover{
	transform: rotate(3600deg);
	transition: 120s linear;
}
.xiaodian{width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 44.6%;
}
.ye1{
	width: 125px;
	height: 60px;
	position: absolute;
	top: 200px;
	left: 12px;
	background: #F1F0F0;
	text-align-last: center;
	line-height: 60px;
}
.ye1 a,.ye2 a,.ye3 a,.ye4 a{
	display: block;
	width: 90px;
	height: 9px;
	background: #F1F0F0;
	position: absolute;
	top: 0px;
	left: 101px;
}
.ye2{
	width: 125px;
	height: 60px;
	position: absolute;
	top: 46px;
	left: 113px;
	background: #F1F0F0;
	transform: rotate(90deg );
	text-align-last: center;
	line-height: 60px;
}
.ye3{
	width: 125px;
	height: 60px;
	position: absolute;
	top: 150px;
	left: 268px;
	background: #F1F0F0;
	transform: rotate(180deg );
	text-align-last: center;
	line-height: 60px;
}
.ye4{
	width: 125px;
	height: 60px;
	position: absolute;
	top: 304px;
	left: 164px;
	background: #F1F0F0;
	transform: rotate(270deg );
	text-align-last: center;
	line-height: 60px;
}
</style>

用css3制作简单的小风车

猜你喜欢