css模拟实体开关效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { background: #ccc; height: 100%; margin: 0; padding: 0; } .wrap { align-content: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; height: 100%; -webkit-box-pack: center; justify-content: center; } .panel { background-color: #fff; border-radius: 4px; box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.25), inset 4px 4px 8px rgba(255, 255, 255, 0.5), inset 2px 2px 2px rgba(177, 177, 177, 0.25), -4px -4px 16px rgba(255, 255, 255, 0.25), 1px 1px 1px rgba(0, 0, 0, 0.1), 4px 4px 2px rgba(0, 0, 0, 0.05), 6px 6px 3px rgba(0, 0, 0, 0.05); height: 420px; position: relative; width: 270px; } .screw { align-content: center; -webkit-box-align: center; align-items: center; background-color: #fff; border: 1px solid #eee; border-radius: 100%; box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2); display: -webkit-box; display: flex; height: 24px; -webkit-box-pack: center; justify-content: center; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 24px; } .screw.top { top: 24px; } .screw.top .screw__slot { -webkit-transform: rotate(10deg); transform: rotate(10deg); } .screw.bottom { bottom: 24px; } .screw.bottom .screw__slot { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .screw__slot { background-color: #eee; border-radius: 2px; box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2); height: 4px; width: calc(100% - 2px); } .switch { background-color: #fff; border-radius: 3px; border: 1px solid #ddd; box-shadow: 0 0 2px rgba(0, 0, 0, 0.75), -2px -2px 2px rgba(255, 255, 255, 0.75); cursor: pointer; position: relative; height: 100%; width: 100%; } .switch__hole { background-color: #bbb; border-radius: 6px; height: 240px; left: 50%; padding: 2px; position: absolute; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 120px; } .switch__groove { background-color: #f7f7f7; border-radius: 5px; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2), inset -1px -1px 4px rgba(0, 0, 0, 0.2), -1px -1px 4px rgba(255, 255, 255, 0.5); padding: 5px; height: 100%; width: 100%; } .switch__top { background-color: #eee; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.05), inset 0 0 24px rgba(0, 0, 0, 0.025), inset -16px -16px 36px rgba(0, 0, 0, 0.1); height: 50%; left: 0; position: absolute; top: 0; -webkit-transition: background .25s ease, box-shadow .25s ease; transition: background .25s ease, box-shadow .25s ease; width: 100%; z-index: 2; } .switch__top-outset { background-color: #fff; background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#f7f7f7)); background-image: linear-gradient(90deg, #fff 0%, #f7f7f7 100%); height: 10px; -webkit-transition: height .25s ease; transition: height .25s ease; } .switch__bottom { background-color: #fff; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 12px rgba(0, 0, 0, 0.05); height: 50%; left: 0; position: absolute; top: 50%; -webkit-transition: background .25s ease, box-shadow .25s ease; transition: background .25s ease, box-shadow .25s ease; width: 100%; z-index: 2; } .switch__bottom-outset { bottom: 0; background-color: #fff; background-image: -webkit-gradient(linear, left top, right top, from(#e7e7e7), to(#d7d7d7)); background-image: linear-gradient(90deg, #e7e7e7 0%, #d7d7d7 100%); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 12px rgba(0, 0, 0, 0.05); height: 0px; positi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0