javaｓｃｒｉｐｔ与CSS结合实现苹果开关按钮的特殊效果
苹果开关按钮效果关闭时关闭
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 ；
}
}
以上是本文的全部内容，希望能够帮助您掌握网页前端的设计。