这是我参与「第四届青训营 」笔记创作活动的的第4天.
今天我们就简单的聊一聊如何使用JS实现风车定时旋转。
想必有一些刚入门让你的小白对我们的前端基础没有过多的了解,今天我带大家一起做一个简单的风车旋转,是不是想想就感觉特别好看,废话不多少直接上才艺......
- 1.首先我们要对风车的大小进行简单的布局
<div style="width:400px; height:400px"></div>
在这里呢我们定义了一个长(400px)、宽(400px)的正方形盒子
相信小伙伴也都知道大风成有4个翅膀,依次定义出来就可以啦!
2.其次通过CSS进行样式改变
<script> box1{ position: absolute; top:200px; left:100px; border-radius: 100px 0px 0px 100px; } </script>
这个就是简单的给我们定义的4个翅膀进行简单的修改改,让更完美一点,这样看上去会有不一样的效果哦!给我们的小翅膀加上定位,然后调整一下位置,并且让他成为半圆的状态
radius圆角
border-radius:允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。
这个(椭)圆与边框的交集形成圆角效果。
border-radius: 属性是一个最多可指定四个 border-*-radius 属性的复合属性
可以根据自己开发的需求,分别指定每个角。以下是规则:
四个值使用时: 第一个值适用于左上角,第二个值适用于右上方,第三值应用于右下角,第四值适用于左下角。
三个值使用时: 第一个值适用于左上,二值适用于右上和左下,右下第三值适用于。
两个值使用时: 第一个值适用于左上和右下角,和二值适用于右上和左下角。
一个值使用时: 所有的四个角都是圆的。
3.最后使用JS对风车接入定时定点
最后呢我们使用JS来实现我们的定时定点
你以为这样就结束了吗?
不,并没有,首先呢我们目前在我们本地的编辑器已经没有了问题,但是在前端开发环境的这个大平台上我们的代码放到别的地方真是可用吗?这是一个很严肃的问题,那好今天呢,我就跟各位说一下并不是!
我在写完这篇文章的时候运行了我的代码效果预览,我发现我的代码不能再“码上掘金”运行,我试过一些文件进行修改,但是我失败了,不过没关系,我通过种种方式最终了解到我的代码并不是适用于各个平台。
window.方法=方法 进行了回调方法手动挂到global上,最终实现了效果。如下图所示:
给你们看一下效果