苹果开关按钮效果

关闭时关闭



HTML

复制代码代码如下所示：









苹果按钮

















CSS

复制代码代码如下所示：

# DIV1 {

宽度：170px；

身高：100px；

边界半径：50px；

职位：相对；

}

# DIV2 {

宽度：96px；

身高：96px；

边界半径：48px；

位置：绝对；

背景：白色；

盒子的影子：0px 2px 4px RGBA（0,0,0,0.4）；

}

开{。

背景：RGBA（0184,0,0.8）；

}

留{。

上图：2px；

右：1px；

}

.close1{

背景：RGBA（255255255,0.4）；

边境：3px固体RGBA（0,0,0,0.15）；

左边框：透明的；

}

close2 {。

左：0px；

上图：0px；

边境：2px固体RGBA（0,0,0,0.1）；

}



Javaｓｃｒｉｐｔ

复制代码代码如下所示：

窗口。指针函数（）{

VaR DIV2 = document.getelementbyid（格式）；

VaR DIV1 = document.getelementbyid（联赛）；

格式。onclick =函数（）{

DIV1。类名=（DIV1。类名= =close1）的开放：close1；

格式。类名=（DIV2 classname = =。close2 ）留：close2 ；

}

}



以上是本文的全部内容，希望能够帮助您掌握网页前端的设计。