Home >Web Front-end >HTML Tutorial >Apple switch button effect_html/css_WEB-ITnose
Apple switch button effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:481214browse
Apple switch button effect~~
When turned off
css code
javascript 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>
#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); } Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS example exercises_html/css_WEB-ITnoseNext article：CSS example exercises_html/css_WEB-ITnose