div+css布局实现Avatron计算器效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现Avatron计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Montserrat&family=Raleway&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-size: 10px;
}
body .avatron {
  font-size: 1.5vmin;
  width: 36.5em;
  height: 60.5em;
  position: absolute;
  top: 51.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgba(14, 30, 37, 0.15) -2em -1em 2.5em 1em;
  background: linear-gradient(to bottom, rgba(182, 184, 173, 0.1), rgba(182, 184, 173, 0.5) 85%, rgba(255, 255, 255, 0.02) 87%, rgba(255, 255, 255, 0.01) 97%, rgba(0, 0, 0, 0.05) 99%) 100% 0%/100% 21.8%, #C6C6BC;
  background-repeat: no-repeat;
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
}
body .avatron::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, #BFC0B6 49%, #c4c4bb 51%) 100% 24%/40% 3em;
  background-repeat: no-repeat;
}
body .avatron .top-stripes-container {
  width: 100%;
  height: 2.4em;
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body .avatron .top-stripes-container .stripe {
  width: 100%;
  height: 0.35em;
  background: #827F66;
  background: linear-gradient(30deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.1) 15%, rgba(255, 255, 255, 0.4) 51%) 100% 100%/0.4em 100%, linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 5%, #827F66 51%);
  background-repeat: no-repeat;
}
body .avatron .result {
  width: 80.5%;
  height: 8em;
  position: absolute;
  top: 8.5%;
  left: 49.8%;
  transform: translateX(-50%);
  box-shadow: black 0.3em 0.3em 0.6em 0px inset, rgba(0, 0, 0, 0.5) -3px -3px 0.6em 0.1em inset, rgba(255, 87, 51, 0.5) 0px 0.3em 0.2em 0px inset;
  background: linear-gradient(#010101 74%, #1A1A1A 78%) 30% 100%/100% 100%;
  background-repeat: no-repeat;
}
body .avatron .button-container {
  border-top-left-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
  border-bottom-right-radius: 0.8em;
  width: 80.5%;
  height: 43.6em;
  position: absolute;
  top: 24%;
  left: 49.8%;
  transform: translateX(-50%);
  border-left: 0.15em solid rgba(0, 0, 0, 0.05);
  border-right: 0.15em solid rgba(0, 0, 0, 0.05);
  border-bottom: 0.15em solid rgba(0, 0, 0, 0.03);
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.4)) 100% 100%/2em 35.8em, linear-gradient(to right, rgba(255, 255, 255, 0.4), #C6C6BC) 0% 0%/3em 100%;
  background-repeat: no-repeat;
}
body .avatron .button-container .button-text {
  font-family: "Chivo Mono", monospace;
  font-family: "Montserrat", sans-serif;
  color: rgba(209, 209, 209, 0.7);
  font-size: 2.7em;
}
body .avatron .button-container .button-text--number {
  font-family: "Raleway", sans-serif;
}
body .avatron .button-container .logo-container {
  width: 19.5em;
  border-right: 0.1em solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 9.7em;
  height: 4.2em;
  top: 2.2em;
  background: linear-gradient(to right, #B7B9AE 49%, transparent 51%) 0% 100%/0.1em 100%, linear-gradient(to bottom, #B7B9AE 49%, transparent 51%) 50% 0%/100% 0.15em, linear-gradient(to top, #B7B9AE 49%, transparent 51%) 50% 100%/100% 0.3em, #D8D8D6;
  font-family: "Inconsolata", monospace;
  background-repeat: no-repeat;
}
body .avatron .button-container .logo {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  font-weight: 200;
  font-size: 2em;
  font-weight: 300;
  letter-spacing: 0.1em;
  left: 5%;
}
body .avatron .button-container .button-container-top {
  border-top-left-radius: 0.8em;
  width: 27%;
  height: 7.8em;
  position: absolute;
  left: 0em;
  top: 0.5%;
  border-radius: 0.5em;
  border: 0.15em solid rgba(0, 0, 0, 0.05);
}
body .avatron .button-container .button-container-top .button-top-row {
  width: 7em;
  position: absolute;
  left: 0.35em;
  border-radius: 0.5em;
  height: 94%;
  bottom: 0;
  overflow: hidden;
}
body .avatron .button-container .button-container-top .button-first {
  box-shadow: inset rgba(0, 0, 0, 0.35) 0px 0.1em 0.8em 0.2em, inset rgba(0, 0, 0, 0.35) -0.5em 0.1em 0.4em 0.2em, inset rgba(118, 36, 3, 0.35) -0.5em 0.1em 0.4em 0.2em;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  width: 100%;
  height: 7.8em;
  border-radius: 0.5em;
}
body .avatron .button-container .button-container-top .button-first .shading {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(213, 104, 0, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(180, 95, 5, 0) 64%) 0% 0/2em 2em, linear-gradient(-45deg, rgba(213, 104, 0, 0) 46%, rgba(255, 255, 255, 0.25) 50%, rgba(180, 95, 5, 0) 64%) 0% 4.7em/2em 2em, linear-gradient(-45deg, rgba(213, 104, 0, 0) 46%, rgba(255, 255, 255, 0.15) 50%, rgba(180, 95, 5, 0) 64%) 100% 0em/2.5em 2em, linear-gradient(45deg, rgba(213, 104, 0, 0) 46%, rgba(255, 255, 255, 0.35) 50%, rgba(180, 95, 5, 0) 64%) 100% 4em/2.5em 3em, radial-gradient(200% 100% at 50% 0%, rgba(166, 71, 12, 0.5), rgba(255, 0, 0, 0), rgba(0, 0, 0, 0)) 0% 0em/6.8em 6.8em, radial-gradient(100% 150% at 0% 50%, rgba(0, 0, 0, 0.7) 30%, rgba(139, 19, 2, 0.3) 45%, rgba(166, 71, 12, 0.2) 50%, rgba(0, 0, 0, 0) 80%) -1.5em -1em/6.8em 7.8em;
  background-repeat: no-repeat;
}
body .avatron .button-container .button-container-top .button-first.........完整代码请登录后点击上方下载按钮下载查看