用css做一个小风车

直接设置一个大的正方形盒子，然后在里面放四个盒子充当叶片

<div class="contenr">
	<div class="bix1"></div><!--叶片1-->
	<div class="bix2"></div><!--叶片2-->
	<div class="bix3"></div><!--叶片3-->
	<div class="bix4"></div><!--叶片4-->
</div>

把对应三个角设置为圆角，这样叶片完成，同时给外面盒子设置关键帧动画实现叶片旋转，这样一个简单的风车就完成了

<style>
	.contenr{
		width:200px;
		height: 200px;
		margin: 50px auto;
		display: flex;
		flex-wrap: wrap;
		position:relative;
		animation: box 1s infinite linear;
	}
	@keyframes box{
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(360deg);
		}
	}
	.banzhi{
		width: 13px;
		height: 200px;
		background: #E19517;
		z-index: -1;
		margin: -100px auto;
	}
	.bix1,.bix2,.bix3,.bix4{
		width: 100px;
		height: 100px;
	}
	.bix1{
		background: #5108C8;
		border-radius: 50% 50% 0 50%;
	}
	.bix2{
		background: #FFED00;
		border-radius: 50% 50% 50% 0;
	}
	.bix3{
		background: #03F310;
		border-radius: 50% 0 50% 50%;
	}
	.bix4{
		background: #F10C0F;
		border-radius:0 50% 50% 50%;
	}
</style>
<body>
<div class="contenr">
	<div class="bix1"></div><!--叶片1-->
	<div class="bix2"></div><!--叶片2-->
	<div class="bix3"></div><!--叶片3-->
	<div class="bix4"></div><!--叶片4-->
</div>
<div class="banzhi"></div>
</body>

用css做一个小风车

相关推荐