正值初夏,用CSS画一个七彩风车
最新回答
猫诱
2024-09-27 12:27:22
我们给一个版心,防止屏幕变大变小样式错乱,然后使用div装风叶盒子和风车杆
风叶盒子采用ul和li去做，这样做出来的层次分明有结构感,然后通过css的旋转属性,用js进行遍历添加到行内,顺便也给每个风叶添加颜色,这里风叶有一个透明的效果,这里可以采用透明度属性进行设置
风叶杆用div的伪元素进行实现，然后通过定位，定位到合适的位置
在通过css的动画属性让风叶转动起来
页面结构<divclass="box"><!--风车盒子--><div><ulclass="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进行统一旋转
/*风车叶片*/.windmillli{position:absolute;top:0;left:calc(50%-100px);z-index:99;width:100px;height:200px;border-radius:100px00100px;transform-origin:rightbottom;}通过js获取到所有的风叶,然后定义好一个旋转基准值便于循环赋值每个风叶的旋转角度,在设置一个扇叶数组,扇叶数组里面存着每个扇叶的颜色,如果有多的扇叶则默认采取第一个,完成以后在通过es6中的map方法进行循环遍历设置背景色和旋转角度
//获取所有的风叶元素constlis=document.querySelectorAll('.windmillli');//旋转基准值constdeg=50;//扇叶颜色constColor=['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:rote2slinearinfinite;}/*旋转动画*/@keyframesrote{from{transform:rotate(0deg);}to{transform:rotate(1080deg);}}代码我上传到了码上掘金上面,大家快过去看看吧代码片段最后祝大家每天开开心心的,坚持努力,无惧未来!
原文：https://juejin.cn/post/7103032631872356382热门标签
