我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

效果图

实现思路

我们给一个版心,防止屏幕变大变小样式错乱,然后使用div装风叶盒子和风车杆

风叶盒子采用ul和li去做，这样做出来的层次分明有结构感,然后通过css的旋转属性,用js进行遍历添加到行内,顺便也给每个风叶添加颜色,这里风叶有一个透明的效果,这里可以采用透明度属性进行设置

风叶杆用div的伪元素进行实现，然后通过定位，定位到合适的位置

在通过css的动画属性让风叶转动起来

页面结构

<div class="box">
	<!-- 风车盒子-->
 <div>
   <ul class="windmill">
<!-- 风车叶子 -->
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
   </ul>
 </div>
</div>

风叶盒子

风叶盒子我们用ul来做,这样显得层次分明,也好便于使用js进行操作,给风叶盒子设置好宽高后,一个风叶盒子就好了

	            /* 风车大盒子 */
			.windmill {
				position: relative;
				z-index: 9;
				width: 400px;
				height: 400px;
				
			}

风叶的制作

风叶通过ul里面的li结合CSS圆角边框的属性进行实现,我们在让所有的风叶同意到达风叶盒子的正中心,这里采用到了定位,然后再把他的旋转中心点设置到左下角,因为一会要通过js进行统一旋转

		/* 风车叶片 */
			.windmill li {
				position: absolute;
				top: 0;
				left: calc(50% - 100px);
				z-index: 99;
				width: 100px;
				height: 200px;
				border-radius: 100px 0 0 100px;
				transform-origin: right bottom;
			
			}

通过js获取到所有的风叶,然后定义好一个旋转基准值便于循环赋值每个风叶的旋转角度,在设置一个扇叶数组,扇叶数组里面存着每个扇叶的颜色,如果有多的扇叶则默认采取第一个,完成以后在通过es6中的map方法进行循环遍历设置背景色和旋转角度

	//获取所有的风叶元素
			const lis = document.querySelectorAll('.windmill li');
			// 旋转基准值
			const deg = 50;
			// 扇叶颜色
			const Color = [
				'150,211,186',
				'215,152,186',
				'162,121,186',
				'150,211,186',
				'215,172,86',
				'251,100,81',
				'140,190,186',
				'251,101,120'
			];

                  // 由于获取的是伪数组,通过es6的解构赋值进行转换成真正的数组
			[...lis].map((R, i) => {
				// 给风叶设置行内属性旋转
				R.style.transform = `rotate(${(i+1)*deg}deg)`
				// 给风叶设置背景颜色,背景颜色如果当前未设置,就默认采用第一个
				R.style.backgroundColor = `rgb(${Color[i]||Color[0]})`
			})

然后再给风叶添加一个背景透明色,基本就完成了

opacity: .7;

风车杆

风车杆我们采用包含着风车盒子的伪元素来做,设置一个宽高,在通过定位定位到正中间,然后设置一个颜色

	                    /* 风车杆 */
				.box>div{
					width: 400px;
					height: 400px;
				}
			.box>div::after {
				content: '';
				width: 15px;
				height: 450px;
				background: rgb(251, 199, 149);
				position: absolute;
				top: 230px;
				left: 50%;
				transform: translate(-50%);
			}

风车转动

最后我们通过设置css的动画操作风叶大盒子的旋转属性让他旋转起来,这样就完成了

       /* 风车大盒子 */
			.windmill {
				position: relative;
				z-index: 9;
				width: 400px;
				height: 400px;
				animation: rote 2s linear infinite;
			}

			/* 旋转动画 */
			@keyframes rote {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(1080deg);
				}
			}

代码我上传到了码上掘金上面,大家快过去看看吧 最后祝大家每天开开心心的,坚持努力,无惧未来!