JavaScript と CSS を組み合わせて Apple スイッチ ボタンの特殊効果を実現_JavaScript スキル

アップルスイッチボタンの効果~~

電源を入れると

html

コードをコピーします コードは次のとおりです:

<頭>

CSS

コードをコピーします コードは次のとおりです:

#div1{
幅: 170px;
高さ: 100px;
border-radius: 50px;
位置: 相対;
}
#div2{
幅: 96px;
高さ: 96px;
border-radius: 48px;
位置: 絶対;
背景: 白;
box-shadow: 0px 2px 4px rgba(0,0,0,0.4);
}
.open1{
背景: rgba(0,184,0,0.8);
}
.open2{
上: 2px;
右: 1px;
}
.close1{
背景: rgba(255,255,255,0.4);
border:3px ソリッド rgba(0,0,0,0.15);
border-left: 透明;
}
.close2{
左: 0px;
上: 0px;
border:2px ソリッド rgba(0,0,0,0.1);
}

javascript

コードをコピーします コードは次のとおりです:

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";
}
}

以上がこの記事の全内容であり、皆様がWEBのフロントエンドデザインをマスターする際のお役に立てれば幸いです。