Apple switch button Effect ~ ~
When turned on
Html
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>apple button</title>
<body>
<div id= "Div1" class= "Open1" >
<div id= "Div2" class= "Open2" ></div>
</div>
</body>
Css
Copy Code code as follows:
#div1 {
width:170px;
height:100px;
border-radius:50px;
position:relative;
}
#div2 {
width:96px;
height:96px;
border-radius:48px;
Position:absolute;
Background:white;
box-shadow:0px 2px 4px Rgba (0,0,0,0.4);
}
. open1{
Background:rgba (0,184,0,0.8);
}
. open2{
top:2px;
right:1px;
}
. close1{
Background:rgba (255,255,255,0.4);
BORDER:3PX solid Rgba (0,0,0,0.15);
Border-left:transparent;
}
. close2{
left:0px;
top:0px;
border:2px solid Rgba (0,0,0,0.1);
}
Javascript
Copy Code code as follows:
Window.onload=function () {
var Div2=document.getelementbyid ("Div2");
var Div1=document.getelementbyid ("Div1");
Div2.onclick=function () {
Div1.classname= (div1.classname== "Close1")? " Open1 ":" Close1 ";
Div2.classname= (div2.classname== "Close2")? " Open2 ":" Close2 ";
}
}
The above mentioned is the entire content of this article, I hope to be able to master the design of the front of the web to help.
