基于vue的html迷你计算器
代码语言:html
所属分类:布局界面
代码描述:基于vue的html迷你计算器,简单黑色布局
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><title>vue.js计算器插件</title> <style> body { height: 100vh; width: 100vw; background: #1939f6; overflow: hidden;}* { box-sizing: border-box;}#app { width: 100%; height: 100%; display: flex; font-family: "Roboto", sans-serif; font-weight: 300; font-size: 24px;}#app #calculator { opacity: 0; -webkit-animation: 1s bounceIn; animation: 1s bounceIn; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; margin: 10px; border-radius: 8px; color: #ffffff; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5); margin: auto; height: 540px; width: 300px; background: #191b1d;}#app #calculator .screen-container { width: 100%; height: 38%; display: flex; flex-direction: column; position: relative; justify-content: center; text-align: right;}#app #calculator .screen-container .calculation,#app #calculator .screen-container .result { width: 100%; height: 50%; padding-right: 15px;}#app #calculator .screen-container .result { display: flex; align-items: flex-end; color: #1939f6; justify-content: flex-end;}#app #calculator .screen-container .result .number { font-size: 50px; font-weight: 800;}#app #calculator .btn-container { width: 100%; height: 62%; display: flex; flex-direction: column; position: relative;}#app #calculator .btn-container .oper-container { z-index: 10; opacity: 0; -webkit-animation: 1s bounceIn; animation: 1s bounceIn; -webkit-animation-delay: .5s; animation-delay: .5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; position: absolute; width: 50px; left: -25px; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5); top: -100px;}#app #calculator .btn-container .oper-container .btn { position: static; width: 50px; height: 50px; background: #1939f6; color: #1939f6; background: #ffffff; display: flex; cursor: pointer;}#app #calculator .btn-container .oper-container .btn .number { margin: auto;}#app #calculator .btn-container .oper-container .btn#clear.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; animation-direction: reverse;}#app #calculator .btn-container .oper-container .btn#clear { cursor: pointer; height: 50px; width: 50px; display: flex; background: #1e2022; border-radius: 8px 0px 0 0; font-size: 16px; box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.5);}#app #calculator .btn-container .oper-container .btn#clear .number { margin: auto; color: #ffffff;}#app #calculator .btn-container .row { position: relative; display: flex; flex-direction: row; width: 100%; height: 25%;}#app #calculator .btn-container .row .btn { cursor: pointer; width: 100%; height: 100%; text-align: center; display: flex; border: 0.5px solid #191b1d; background: #1e2022;}#app #calculator .btn-container .ro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0