javascript与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);
}
Javascript
复制代码代码如下所示:
窗口。指针函数(){
VaR DIV2 = document.getelementbyid(格式);
VaR DIV1 = document.getelementbyid(联赛);
格式。onclick =函数(){
DIV1。类名=(DIV1。类名= =close1)的开放:close1;
格式。类名=(DIV2 classname = =。close2 )留:close2 ;
}
}
以上是本文的全部内容,希望能够帮助您掌握网页前端的设计。