中性风格的计算器效果
代码语言:html
所属分类:布局界面
代码描述:中性风格的计算器效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap'); *, *::before, *::after{ box-sizing: border-box; font-family: sans-serif; font-weight: normal; font-size: 10px; } body{ padding:0; margin: 0; background: rgba(255, 192, 203, 0.7); } h4{ color: #fff; font-size: 50px; text-align: center; font-family: 'Parisienne', cursive; font-weight: bold; text-shadow: -2px -2px 10px #fc737c; } .layout{ margin: auto; width: 350px; height: 540px; position: relative; background: pink; border-radius: 20px; justify-content: center; box-shadow: 2px 2px 15px rgb(248, 147, 165); } .calculator{ height: 500px; display: grid; justify-content: center; grid-template-columns: repeat(4, 70px); grid-template-rows: minmax(100px, auto) repeat(5, 70px); } .calculator > button{ margin: 6px; color: #fff; font-size: 2rem; outline: none; cursor: pointer; } .span-two{ grid-column: span 2; height: 90%; width: 95%; border-radius: 5em; } button{ border-radius: 50%; border: none; background: linear-gradient(315deg, #fc737c, pink); box-shadow: 2px 2px 6px #f58787; } button:active{ background: linear-gradient(315deg, pink, #fc737c); } .output{ grid-column: 1/ -1; box-shadow : inset -2px -2px 10px #f17171; display: flex; align-items: flex-end; justify-content: space-around; flex-direction:column; padding: 0px 20px; word-wrap: break-word; word-break: break-all; border-radius: 30px; margin: 35px 0 30px 0; } .output .previous { color: rgb(255, 255, 255, .7); font-size: 20px; margin-top:10px; } .output .current { color: #fff; font-size: 25px; margin: 5px 0; } footer{ position: relative; margin: 20px 0; top: 10vh; height: 50px; width: 100%; text-align: center; color: #fff; font-size: 32px; font-weight: bold; text-shadow: 2px 2px 5px #fc737c; font-family: 'Parisienne', cursive; } a{ color: #fff; font-size: 35px; font-weight: bold; text-decoration:none; font-family: 'Parisienne', cursive; text-shadow: 2px 2px 5px #fc737c; } </style> </head> <body> <div class="layout"> <div class="calculator"> <div class="output"> <div data-previous class="previous"></div> <div data-current class="current"></div> </div> <button data-clear class="span-two">Clear</button> <button data-delete>Del</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>*</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button data-equals class="span-two">=</button> </div> </div> <script> class Calculator { cons.........完整代码请登录后点击上方下载按钮下载查看
网友评论0