Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > Apple switch button effect_html/css_WEB-ITnose

Apple switch button effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:46:48

Original

1208 people have browsed it

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>

Copy after login

#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);    }

Copy after login

Related labels：

苹果开关按钮效果

source：php.cn

Previous article：CSS example exercises_html/css_WEB-ITnose Next article：CSS(一)_html/css_WEB-ITnose

Statement of this Website

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