vue实现一个简单的计算器效果代码
代码语言:html
所属分类:其他
代码描述:vue实现一个简单的计算器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"> <style> body { height: 100vh; width: 100vw; background: #1939f6; overflow: hidden; } * { box-sizing: border-box; } #app { width: 100%; height: 100%; display: -webkit-box; 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: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; -webkit-box-pack: center; 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: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; color: #1939f6; -webkit-box-pack: end; 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: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; 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: -webkit-box; 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: -webkit-box; 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: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; width: 100%; height: 25%; } #app #calculator .btn-container .row .btn { cursor: pointer; width: 100%; height: 100%; text-align: center; display: -webkit-box; display: flex; border: 0.5px solid #191b1d; background: #1e2022; } #app #calculator .btn-container .row .btn .number { opacity: 0; -webkit-animation: 1s fadeIn; animation: 1s fadeIn; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; margin: auto; } #app #calculator .btn-container .row .btn:nth-child(1) { border-left: none; } #app #calculator .btn-container .row .btn:nth-child(3) { border-right: none; } #app #calculator .btn-container .row .btn.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; } #app #calculator .btn-container .row .btn#result { position: absolute; right: -12px; bottom: -12px; width: calc(33% * 1.25); height: calc(100% * 1.25); background: #1939f6; border-bottom-right-radius: 8px; border: 0.5px rgba(0, 0, 0, 0.0001); } #app #calculator .btn-container .row .btn#result:not(.resetappearanim) { 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; } #app #calculator .btn-container .row .btn#result.animate { -webkit-animation: fade 0.12s ease-in-out; animation: fade 0.12s ease-in-out; animation-direction: reverse; } #app #calculator .btn-container .row .btn#dot { border-bottom-left-radius: 8px; } #app #calculator .btn-container .row:last-child .btn { border-bottom: none; } #app #calculator .btn-container .btn.operations.animate { -webkit-animation: fadeThird 0.12s ease-in-out; animation: fadeThird 0.12s ease-in-out; animation-direction: reverse; } #app #calculator .btn-container .btn.operations.divide { left: calc(33% - 25px); top: calc(25% - 25px); } #app #calculator .btn-container .btn.operations.multiplication { left: calc(66% - 25px); top: calc(25% - 25px); } #app #calculator .btn-container .btn.operations.plus { left: calc(66% - 25px); top: calc(50% - 25px); } #app #calculator .btn-container .btn.operations.less { left: calc(33% - 25px); top: calc(50% - 25px); border-radius: 0 0 8px 0; } @-webkit-keyframes fade { from { background: #1e2022; } to { background: #1939f6; } } @keyframes fade { from { background: #1e2022; } to { background: #1939f6; } } @-webkit-keyframes fadeThird { from { background: #ffffff; } to { background: #1e2022; } } @keyframes fadeThird { from { background: #ffffff; } to { background: #1e2022; } } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounce { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0