这两天做了一个有趣的东西。相信大家都看见过开关按钮吧? 比如你打开手机设置你注意看一下打开WIFI那个按钮是滑动的,恰好。咱就过了那个功能。做出那个功能挺费脑子的,当前我遇到的有两种办法能实现,第一种是js效果,第二种是css,当然使用js效果做的还是挺多的。这里我给大家一个连接可以查看js效果的开关按钮查看JS效果的开关按钮。
还有一个是css效果是开关按钮点击打开链接CSS效果。当然,这些东西都是根据业务需求去使用的。具体得看大家了。
展示一下效果图:
、
看上去效果还是凑合吧,虽然有很多不好,下面我把代码分享出来给大家使用。
<style type="text/css"> .mui-switch { width: 43px; height: 20px; position: relative; border: 1px solid #dfdfdf; background-color: #fdfdfd; box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-clip: content-box; display: inline-block; -webkit-appearance: none; user-select: none; outline: none; } .mui-switch:before { content: ''; width: 18px;