html5和css3制作switch开关控件

发布：2023/12/7 15:39:32作者：大数据来源：大数据浏览次数：489

/* switch组件 */

.switch-component {

position: relative;

width: 50px;

height: 25px;

background-color: #dadada;

border-radius: 25px;

border: none;

outline: none;

-webkit-appearance: none;

transition: all .2s ease;

}

/* 按钮 */

.switch-component::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background-color: #fff;

border-radius: 50%;

transition: all .2s ease;

}

/* checked状态时，背景颜色改变 */

.switch-component:checked {

background-color: #86c0fa;

}

/* checked状态时，按钮位置改变 */

.switch-component:checked::after {

left: 50%;

}

声明：本站内容来源于原创和互联网，尊重作者版权，转载请注明来源网址，欢迎收藏，谢谢！

　.net core 部署错误An error occurred while starting the application

iis post大小配置，提交新闻内容一闪而过　

html5和css3制作switch开关控件

柏港建站平台