css画扇形的几种实现方式

html-css027

css画扇形的几种实现方式,第1张

方法一:border

我们知道利用border+宽高:0 可以实现如下效果 (假设圆的半径是100px)

如果要实现扇形在此基础上圆角一下即可,同时设置某一方颜色透明即可实现”某一块扇形”的视觉效果

方法二:矩形+半圆相切

基本思路是:左边的半圆旋转与右边的矩形相切。

至于细节: 

1.半圆的由来:可以rect裁剪只显示圆的左边部分 

2.同理,矩形也通过rect裁剪只显示右边部分,同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

然后剩下的完善同样三个标签旋转一定角度。

你结构不用动,只需要调整CSS里的.menuHolder为位置,然后再分别调整每个菜单的旋转角度(角度全部改成绝对值,即负数),以及三个圆的圆角位置(border-radius:左上,右上,右下,左下),将右下数值移动到左下,所有这些没经过实验,自己调吧。

您好,您的问题实现起来并不复杂。我说一下思路吧。

1)按钮问题:例如小灯,你要准备两套图片,一套灰色的灯代表关闭,另一套黄色的灯代表打开。当点击小灯后,利用JS代码把灰灯图片替换成黄灯图片。OFF和ON按钮处理方法相同。当然,要先点击ON后小灯才能被点亮,这与现实生活中的风扇一样,OFF时小灯是不能被点亮的。

2)风扇旋转问题:CSS3有新功能:object.style.transform="rotate(10deg)" ,表示将这个元素旋转10度。要让风扇转起来,你要做两件事:1是准备一张风扇的图片;2当按下ON按钮后启动定时器SetInterva,每隔一定时间就用上述旋转命令转动风扇图片。时间越短转得越快。当选择不同的速度时,修改不同的的定时器定时参数。比如1档时间为100毫秒(旋转最快),2档200毫秒,3档300毫秒(旋转最慢)。具体数值要看最终效果而定。