我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
效果图
实现思路
我们给一个版心,防止屏幕变大变小样式错乱,然后使用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); } }
