css实现一个中性计算器效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个中性计算器效果代码,可切换夜晚模式
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; outline: none; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; } ::-webkit-scrollbar { width: 0; } .clearfix:after { content: ""; display: table; clear: both; } /*____________________________________________________________ # Container ____________________________________________________________*/ .container { width: 100%; height: 100vh; background: linear-gradient(45deg, #FBCA88, #EF69AD); } /*____________________________________________________________ ## Dark Button ____________________________________________________________*/ .darkButton { position: absolute; top: 20px; left: 20px; width: 50px; height: 26px; border-radius: 50px; background-color: #f2f3f7; cursor: pointer; z-index: 2; } .darkButton__indicator { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50px; background-color: #facf6f; transition: all 0.3s; } .darkButton.darkButton_dark { background-color: #283245; } .darkButton.darkButton_dark .darkButton__indicator { left: 26px; background-color: #f2f3f7; } .container.container_dark { background: linear-gradient(45deg, #476892, #59355D); } .container.container_dark .calculator { background-color: #283245; } .container.container_dark .calculator .inputWrap__result { color: #f2f3f7; } .container.container_dark .calculator .button { background-color: #283245; color: #f2f3f7; box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.2), -6px -6px 10px -1px rgba(255, 255, 255, 0.05); } .container.container_dark .calculator .button[action=clear] { color: #a9aeb3; } .container.container_dark .calculator .button[action=negate] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaeaaa7acd.png"); } .container.container_dark .calculator .button[action=percent] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaec15cae4.png"); } .container.container_dark .calculator .button:active { box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.05), -0.5px -0.5px 0 rgba(0, 0, 0, 0.1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.01); } /*____________________________________________________________ ## Calculator ____________________________________________________________*/ .calculator { position: absolute; top: 50%; left: 50%; width: 545px; height: 817px; transform: translate(-50%, -50%); border-radius: 50px; background-color: #f2f3f7; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); overflow: hidden; } /*____________________________________________________________ ### Output of Numbers ____________________________________________________________*/ .inputWrap { position: absolute; bottom: 683px; width: 100%; } .inputWrap__result { padding: 0 30.6px; width: 100%; height: 100px; text-align: right; font-family: sans-serif; font-size: 90px; color: #000; border: 0; outline: none; background-color: transparent; } /*____________________________________________________________ ### Buttons ____________________________________________________________*/ .buttonWrap { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 483.8px; } .buttonWrap__row { width: 100%; } .button { display: block; float: left; margin-left: 30.6px; margin-bottom: 30.6px; width: 98px; height: 98px; text-align: center; font-family: sans-serif; font-size: 50px; line-height: 1.9; color: #000; box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.1), -6px -6px 10px -1px rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0); border-radius: 30px; background-repeat: no-repeat; background-size: 35%; background-position: center; background-color: #f2f3f7; cursor: pointer; } .button._double { padding-left: 35px; width: 226.6px; text-align: left; } .button[action=clear] { color: #676d80; } .button[action=negate] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaeaaa7acd.png"); } .button[action=percent] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaec15cae4.png"); } .button[action=divide] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaeec3507b.png"); } .button[action=multiplication] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaf015c7eb.png"); } .button[action=minus] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaf171e382.png"); } .button[action=plus] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaf2a5eadc.png"); } .button[action=equality] { background-image: url("//repo.bfw.wiki/bfwrepo/image/60dfaf48b2cb2.png"); } .button:first-child { margin-left: 0; } .button:active { box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0 white, 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.01); } /*____________________________________________________________ # @media ____________________________________________________________*/ /*____________________________________________________________ ## @media 545px ____________________________________________________________*/ @media screen and (max-width: 545px) { .calculator { width: 414px; height: 736px; border-radius: 0; } .inputWrap { bottom: 530px; } .inputWrap__result { padding: 0 23.3px; height: auto; font-size: 68.5px; } .buttonWrap { width: 368px; } .button { margin-left: 23.3px; margin-bottom: 23.3px; width: 74.5px; height: 74.5px; font-size: 38px; border-radius: 22.8px; } .button._double { padding-left: 24px; width: 172.3px; } } /*____________________________________________________________ ## @media 375px ____________________________________________________________*/ @media screen and (max-width: 375px) { .calculator { width: 100%; height: 667px; } .inputWrap { bottom: 470px; } .inputWrap__result { padding: 0 20.6px; font-size: 62px; } .buttonWrap { width: 333.8px; } .button { margin-left: 20.6px; margin-bottom: 20.6px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0