健康指示仪动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：健康指示仪动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@font-face {
  font-family: 'd7';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33297/digital7-webfont.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/33297/digital7-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 100%;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: black;
  color: white;
  font-size: 62.5%;
  text-align: center;
  background-size: 8%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.05" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

#app {
  --health-level-1: #83FA21;
  --health-level-2: #C8FF9B;
  --label-color: #444;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}

.health-bar-container {
  padding: 2rem;
  margin: 0 1rem;
  background: black;
  border-radius: 24px 0 24px 0;
  box-shadow: inset 0 0 0 5px #222;
}

.health-bar {
  width: 100%;
}
@media (min-width: 801px) {
  .health-bar {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
  }
}

.health-val {
  position: relative;
  font-family: 'd7', monospace;
  font-size: 6rem;
  font-weight: normal;
  color: var(--label-color);
  text-align: left;
  padding: 0;
  margin: 0;
}
.health-val span {
  position: relative;
  z-index: 1;
}
.health-val:before {
  position: absolute;
  z-index: 0;
  display: block;
  content: "000";
  color: #222;
}
@media (max-width: 800px) {
  .health-val {
    display: none;
  }
}

.col {
  padding: 0 .85rem;
}

@media (min-width: 801px) {
  .col:first-of-type {
    width: 20%;
  }
}

.col:last-of-type ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 0.5rem;
  grid-row-gap: 0px;
}
.col:last-of-type li {
  position: relative;
  padding: 2.5rem 1rem;
  -webkit-transform: skewX(30deg);
          transform: skewX(30deg);
}
.col:last-of-type li:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(var(--health-level-1)), color-stop(84%, var(--health-level-2)));
  background-image: linear-gradient(0deg, var(--health-level-1) 0%, var(--health-level-2) 84%);
}
@media (min-width: 801px) {
  .col:last-of-type {
    -webkit-box-flex: 1;
            flex: 1;
  }
  .col:last-of-type ul {
    grid-column-gap: 1.25rem;
  }
}

button {
  display: inline-block;
  text-align: center;
  margin: 0.5rem auto 0 auto;
  padding: 0.75rem 1rem;
  border: 0;
  font-family: monospace;
  font-size: 1rem;
  text-transform: uppercase;
  border-radius: 6px;
  background: #333;
  color: #777;
}

input[type="range"] {
  height: 25px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 10px 0;
  width: 100%;
  background: none;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: var(--health-level-1);
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border: 1px solid var(--health-level-1);
  heigh.........完整代码请登录后点击上方下载按钮下载查看