css实现四种单选框美化效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现四种单选框美化效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> body{background:#000;margin:0;padding:0;} .wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; width: 400px; margin: 40vh auto 0; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .switch_box{ display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 200px; min-width: 200px; height: 200px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } /* Switch 1 Specific Styles Start */ .box_1{ background: #eee; } input[type="checkbox"].switch_1{ font-size: 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 3.5em; height: 1.5em; background: #ddd; border-radius: 3em; position: relative; cursor: pointer; outline: none; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"].switch_1:checked{ background: #0ebeff; } input[type="checkbox"].switch_1:after{ position: absolute; content: ""; width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3); box-shadow: 0 0 .25em rgba(0,0,0,.3); -webkit-transform: scale(.7); transform: scale(.7); left: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"].switch_1:checked:after{ left: calc(100% - 1.5em); } /* Switch 1 Specific Style End */ /* Switch 2 Specific Style Start */ .box_2{ background: #666; } input[type="checkbox"].switch_2{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100px; height: 8px; background: #444; border-radius: 5px; position: relative; outline: 0; cursor: pointer; } input[type="checkbox"].switch_2:before, input[type="checkbox"].switch_2:after{ position: absolute; content: ""; -webkit-transition: all .25s; transition: all .25s; } input[type="checkbox"].switch_2:before{ width: 40px; height: 40px; background: #ccc; border: 5px solid #666; border-radius: 50%; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } input[type="checkbox"].switch_2:after{ width: 30px; height: 30px; background: #666; border-radius: 50%; top: 50%; left: 10px; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } input[type="checkbox"].switch_2:checked:before{ left: calc(100% - 35px); } input[type="checkbox"].switch_2:checked:after{ left: 75px; -webkit-transform: scale(0); transform: scale(0); } /* Switch 2 Specific Style End */ /* Switch 3 Specific Style Start */ .box_3{ background: #19232b; } .toggle_switch{ width: 100px; height: 45px; position: relative; } input[type="checkbox"].switch_3{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; cursor: pointer; outline: 0; z-index: 1; } svg.checkbox .outer-ring{ stroke-dasharray: 375; stroke-dashoffset: 375; -webkit-animation: resetRing .35s ease-in-out forwards; animation: resetRing .35s ease-in-out forwards; } input[type="checkbox"].switch_3:checked + svg.checkbox .outer-ring{ -webkit-animation: animateRing .35s ease-in-out forwards; animation: animateRing .35s ease-in-out forwards; } input[type="checkbox"].switch_3:checked + svg.checkbox .is_checked{ opacity: 1; -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } input[type="checkbox"].switch_3:checked + svg.checkbox .is_unchecked{ opacity: 0; -webkit-transform: translateX(-200%) rotate(180deg); transform: translateX(-200%) rotate(180deg); } svg.checkbox{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } svg.checkbox .is_checked{ opacity: 0; fill: yellow; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateX(200%) rotate(45deg); transform: translateX(200%) rotate(45deg); -webkit-transition: all .35s; transition: all .35s; } svg.checkbox .is_unchecked{ opacity: 1; fill: #fff; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); -webkit-transition: all .35s; transition: all .35s; } @-webkit-keyframes .........完整代码请登录后点击上方下载按钮下载查看
网友评论0