编程知识 cdmana.com

Daily CSS_ Apple like smooth switch button

# everyday CSS_ Apple like smooth switch button > 2020_12_24![ Smooth button ](http://cdn.xiaxiang.tech/image/blogs/html/CSS/ everyday CSS/2020_12_24/ Smooth button .gif) Source code
## 1. Code parsing ### 1.1 html Code parsing ```html
``` The outermost layer checkbox, It's the whole button , inner yes ON The area occupied by the lower green box , toggle It's something you can click on ON and OFF Region .
### 1.2 css Code parsing - Set body Font and background color ```cssbody{ margin: 0; padding: 0; font-family: sans-serif; background: #dcdcdc;}```- Set the background color of the button , Location , Round border , Top and bottom border color and thickness ```css.checkbox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 50px; border-radius: 25px; background: linear-gradient(0deg, #d8d8d8, #cccccc); border-top: 0.02em solid #ececec; border-bottom: 0.02em solid #ececec;}```- Set Green background area Up, down, left and right , To determine the width and height , Be careful , * There's no width or height here , The default is auto* Set the background , Round border , Shadow ```css.checkbox .inner{ position: absolute; /* Because there's no width or height , So you can do this */ top: 10px; left: 10px; right: 10px; bottom: 10px; background: linear-gradient(0deg, #a5a5a5, #717171); border-radius: 20px; box-shadow: inset 0 0 15px rgba(0,0,0,.5);}```- Set ON OFF Button size , Location , Color , background , Shadow , Top and bottom border styles , Set the animation time on the button to 0.5s```css.checkbox .inner .toggle{ position: absolute; top: -3px; left: -3px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(0deg, #ccc, #e4e4e4); box-shadow: 0 4px 6px rgba(0,0,0,.2); box-sizing: border-box; border-top: 0.04em solid #ececec; border-bottom: 0.01em solid #ececec; transition: 0.5s;}```- Set OFF The style of ,, It's determined by the positioning up, down, left and right Width and height , Set the background , Round border , `line-height` Set the vertical font ```css.checkbox .inner .toggle:before{ content: "OFF"; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: linear-gradient(0deg, #e4e4e4, #ccc); border-radius: 50%; text-align: center; font-size: 10px; line-height: 28px; color: #a9a9a9;}```- Set The font of the selected button , ON, All of them don't write other properties , It's because other properties inherit `checkbox .inner .toggle:before````css.checkbox .inner.active .toggle:before{ content: "ON"; color: #00d22d;}```- When the button is selected , Slide right , And change the background color , Change the time to 0.5s```css.checkbox .inner.active .toggle{ left: 47px;}.checkbox .inner.active{ background: linear-gradient(0deg, #00d22d, #158a00);}```
### 1.3 javascript Code parsing ```javascript```1. First get inner and toggle, A background color box , A round button 2. Give me the button toggle Register click events , Click on ON OFF The button works 3. When inner Locate in active, That is to say inner The element contains active Class , Then remove , If not , Then add , Do the opposite 4. When inner Locate in active, toggle It's going to move right , inner The background color changes , stay css in Set 5. Be accomplished , The process is as follows ![active](http://cdn.xiaxiang.tech/image/blogs/html/CSS/ everyday CSS/2020_12_24/ Nothing active.png)![active](http://cdn.xiaxiang.tech/image/blogs/html/CSS/ everyday CSS/2020_12_24/ Yes active.png)
## 2. Source code ### 2.1 html Source code ```html
```### 2.2 css Source code ```cssbody{ margin: 0; padding: 0; font-family: sans-serif; background: #dcdcdc;}.checkbox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 50px; border-radius: 25px; background: linear-gradient(0deg, #d8d8d8, #cccccc); border-top: 0.02em solid #ececec; border-bottom: 0.02em solid #ececec;}.checkbox .inner{ position: absolute; /* Because there's no width or height , So you can do this */ top: 10px; left: 10px; right: 10px; bottom: 10px; background: linear-gradient(0deg, #a5a5a5, #717171); border-radius: 20px; box-shadow: inset 0 0 15px rgba(0,0,0,.5);}.checkbox .inner .toggle{ position: absolute; top: -3px; left: -3px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(0deg, #ccc, #e4e4e4); box-shadow: 0 4px 6px rgba(0,0,0,.2); box-sizing: border-box; border-top: 0.04em solid #ececec; border-bottom: 0.01em solid #ececec; transition: 0.5s;}.checkbox .inner .toggle:before{ content: "OFF"; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: linear-gradient(0deg, #e4e4e4, #ccc); border-radius: 50%; text-align: center; font-size: 10px; line-height: 28px; color: #a9a9a9;}.checkbox .inner.active .toggle:before{ content: "ON"; color: #00d22d;}.checkbox .inner.active .toggle{ left: 47px;}.checkbox .inner.active{ background: linear-gradient(0deg, #00d22d, #158a00);}```

版权声明
本文为[itread01]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225110238129y.html

Scroll to Top