css实现墙上物理开关按键面板点击效果代码
代码语言:html
所属分类:其他
代码描述:css实现墙上物理开关按键面板点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: 0; } body { height: 100vh; margin: 0; display: grid; place-items: center; font-family: sans-serif; font-size: 1.8rem; background: #222; } .plate { background: #F0F0F0; width: 300px; height: 400px; border-radius: 10px; box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255, 255, 255, 0.5), inset -0.2em -0.2em 0.2em 0 rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; } .plate .hole { background: #000; content: ""; border-radius: 50%; width: 25px; height: 25px; position: relative; } .plate .hole:before { content: ""; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 22px; height: 22px; background: #F5F5F5; } .plate .hole:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 3px; height: 22px; background: #222; z-index: 5; } .plate .switch { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 150px; width: 100px; border-radius: 5px; margin: 2em 0; overflow: hidden; box-shadow: 0 10px 10px -5px rgba(233, 219, 176, 0), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 4px #DCDCDC, 0 0 0 5px rgba(0, 0, 0, 0.1); } .plate .switch div { width: 100%; display: block; position: relative; height: 50%; display: flex; align-items: center; background: #fffaea; } .plate .switch div label { width: 100%; height: 100%; display: block; text-align: center; line-height: 2.5em; text-transform: uppercase; font-size: 1em; } .plate .switch div label.on { display: block; position: absolute; height: 70px; text-align: center; line-height: 70px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0