11款好看的 Checkbox 切换开关样式 – Switcher styles collection
6月 29, 2016
评论
Sponsor
把一个选项属性(Checkbox)设计成切换形关的样式，确实是一个很有创意的想法，视觉体验方面也大大提升。
随着是 CSS3 的出现，实现这些切换样式并不困难，今天我们分享来自 Imagine Alex 编写的「Switcher styles collection」，里面有11款目前流行的切换开头样式，并且包住源码，设计师们可以参考或学习这些技术。
样式截图：
使用教程
演示中，一共有11款开关样式，而且用法相当简单
Step 1: HTML 代码
每个开头使用二行代码完成，非常简洁。
Step 2: CSS3样式
input[type="checkbox"]{
display: none;
&+label{
display: inline-block;
width: 40px;
height: 20px;
position: relative;
transition: 0.3s;
margin: 0px 20px;
box-sizing: border-box;
&:after,&:before{
content: '';
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 20px;
height: 20px;
transition: 0.3s;
cursor: pointer;
}
}
}
#simple-1,#simple-2,#simple-3{
&:checked+label{
&.red{background: #ECA9A7;&:after{background: #D9534F;}}
&.green{background: #AEDCAE;&:after{background: #5CB85C;}}
&:after{
left: calc(~'100% - 20px');
}
}
&+label{
background: #ddd;
border-radius: 20px;
box-shadow: 1px 1px 3px #aaa;
&:after{
background: #fff;
border-radius: 50%;
box-shadow: 1px 1px 3px #aaa;
}
}
}
建议大家直接看演示链接的效果，里面也有源代码查看和编辑。
推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站