html5和css3制作switch开关控件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* 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%; } |
发表评论