css+js实现可换背景色的透明checkbox开关效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现可换背景色的透明checkbox开关效果代码
代码标签: css js 换 背景色 透明 checkbox 开关
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #555; display: grid; place-items: center; height: 100vh; width: 100vw; } .switch { position: absolute; display: inline-block; width: 180px; height: 68px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; display: flex; justify-content: flex-start; align-items: center; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 0.65s cubic-bezier(0.17, 0.67, 0.83, 0.67); transition: 0.65s cubic-bezier(0.17, 0.67, 0.83, 0.67); background-color: rgba(0,0,0,0.133); } .slider:before { position: absolute; content: ""; font-size: 35px; overflow: hidden; color: #07c8bb; height: 54px; width: 54px; left: 7px; background-color: rgba(255,255,255,0.533); -webkit-transition: 0.65s cubic-bezier(0.17, 0.67, 0.83, 0.67); transition: 0.65s cubic-bezier(0.17, 0.67, 0.83, 0.67); box-shadow: 0 0 6px rgba(0,0,0,0.86); } .slider.round { border-radius: 34px; box-shadow: inset 0 0 6px rgba(0,0,0,0.86); } .slider.round:before { border-radius: 50%; } input:checked + .slider:before { -webkit-transform: translateX(111px); -ms-transform: translateX(111px); transform: translateX(111px); } .drp { position: absolute; display: inline-block; top: 15px; left: 15px; color: #fff; user-select: none; } .tgg { cursor: pointer; padding: 15px; border-radius: 3px 3px 0px 0px; z-index: 5; font-weight: bold; } .tgg:after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 3px; margin-bottom: 2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #fff; } .mnu { top: 100%; position: absolute; width: 100%; left: 0; display: inline-block; background-color: rgba(255,255,255,0.55); border-radius: 0px 0px 3px 3px; transition: all 2s; z-index: 0; } .itm { padding: 5px 15px; cursor: pointer; text-align: center; font-weight: bold; letter-spacing: 1px; } .itm:hover { background-color: rgba(255,255,255,0.25); } .show-menu { animation: show-menu 0.3s ease forwards; } .hide-menu { animation: hide-menu 0.3s ease forwards; } @-moz-keyframes show-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes show-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @-o-keyframes show-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes show-menu { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @-moz-keyframes hide-menu { from { opacity: 1; transform: translate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0