Heim >Web-Frontend >HTML-Tutorial >苹果开关按钮效果_html/css_WEB-ITnose
苹果开关按钮效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:481232Durchsuche
苹果开关按钮效果~~
关闭时 开启时
html code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>apple button</title></head><body> <div id="div1" class="open1"> <div id="div2" class="open2"></div> </div></body></html>
css code
#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 code
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"; } }
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS实例练习_html/css_WEB-ITnoseNächster Artikel：CSS(一)_html/css_WEB-ITnose