<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>超清新的3款纯CSS3自定义Checkbox开关DEMO演示</title> <style> .wrapasdfdsfdsf { position: relative; width: 10%; margin: 72px 0; top: 50%; float: left; } label { margin: 1.5em auto; } input { position: absolute; left: -9999px; } .slider-v1 { position: relative; display: block; width: 5.5em; height: 3em; cursor: pointer; border-radius: 1.5em; transition: 350ms; background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd; box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7); } .slider-v1::before { position: absolute; content: ''; width: 2em; height: 2em; top: 0.5em; left: 0.5em; border-radius: 50%; transition: 250ms ease-in-out; background: linear-gradient(#f5f5f5 10%, #eeeeee); box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.5em 0.3em -0.1em rgba(0, 0, 0, 0.25); } .slider-v1::after { position: absolute; content: ''; width: 1em; height: 1em; top: 1em; left: 6em; border-radius: 50%; transition: 250ms ease-in; background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd; box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.3); } input:checked + .slider-v1::after { background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #4c6; box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), -7.25em 0 0 -0.25em rgba(0, 0, 0, 0.12); } input:checked + .slider-v1::before { left: 3em; } .slider-v2 { position: relative; display: block; width: 5.5em; height: 3em; cursor: pointer; border-radius: 1.5em; transition: 350ms; background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)), #ddd; box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7); } .slider-v2::after { position: absolute; content: ''; width: 2em; height: 2em; top: 0.5em; left: 0.5em; border-radius: 50%; transition: 250ms ease-in-out; background: linear-gradient(#f5f5f5 10%, #eeeeee); box-shadow: 0 0.1em 0.15em -0.05em rgba(255, 255, 255, 0.9) inset, 0 0.2em 0.2em -0.12em rgba(0, 0, 0, 0.5); } .slider-v2::before { position: absolute; content: ''; width: 4em; height: 1.5em; top: 0.75em; left: 0.75em; border-radius: 0.75em; transition: 250ms ease-in-out; background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0; box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset; } input:checked + .slider-v2::before { box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset; } input:checked + .slider-v2::after { left: 3em; } .slider-v3 { position: relative; display: block; width: 7em; height: 3em; cursor: pointer; border-radius: 1.5em; transition: 350ms; background: #ddd; } .slider-v3::after { position: absolute; content: ''; width: 2em; height: 2em; top: 0.5em; left: 0.5em; border-radius: 1.5em; transition: width 200ms ease-out, height 300ms 50ms ease-in, top 300ms 50ms ease-in, left 250ms 50ms ease-in, background 300ms ease-in, box-shadow 300ms ease-in; background: #f2f2f2; box-shadow: 0 0 0 1.5em #f2f2f2 inset; } input:checked + .slider-v3::after { width: 4em; height: 3em; top: 0; left: 3em; background: #4c6; box-shadow: 0 0 0 0 #f2f2f2 inset; } </style> </head> <body> <div> <input type="checkbox" id="s1" /> <label for="s1"></label> <input type="checkbox" id="s2" checked="" /> <label for="s2"></label> </div><!--/wrapasdfdsfdsf--> <div> <input type="checkbox" id="s3" /> <label for="s3"></label> <input type="checkbox" id="s4" checked="" /> <label for="s4"></label> </div><!--/wrapasdfdsfdsf--> <div> <input type="checkbox" id="s5" /> <label for="s5"></label> <input type="checkbox" id="s6" checked="" /> <label for="s6"></label> </div><!--/wrapasdfdsfdsf--> </body> </html>
纯CSS3自定义Checkbox开关
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
纯CSS3实现的垂直动画菜单
下一篇:
JS和CSS文本输入框粒子动画特效