jquery+css实现减肥卡路里计数器卡片效果代码-html代码-BFW代码库

jquery+css实现减肥卡路里计数器卡片效果代码

代码语言：html

代码描述：jquery+css实现减肥卡路里计数器卡片效果代码

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

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

<head>
    <meta charset="UTF-8">

    <script src="https://use.typekit.net/nxd0jaz.js"></script>
    <script>
        try{Typekit.load({ async: true });}catch(e){}
    </script>
<style>
    *, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background: -webkit-linear-gradient(-45deg, #fffe99, #b6feb7);
  background: linear-gradient(-45deg, #fffe99, #b6feb7);
}

.calorie-counter {
  background: -webkit-linear-gradient(top left, #4d4d4d, #000);
  background: linear-gradient(to bottom right, #4d4d4d, #000);
  -webkit-animation: load 1s ease-out forwards;
  -moz-animation: load 1s ease-out forwards;
  animation: load 1s ease-out forwards;
  -webkit-transform: translate3d(-50%, -40%, 0);
  -moz-transform: translate3d(-50%, -40%, 0);
  -ms-transform: translate3d(-50%, -40%, 0);
  -o-transform: translate3d(-50%, -40%, 0);
  transform: translate3d(-50%, -40%, 0);
  background-color: #4d4d4d;
  border-radius: 4px;
  box-shadow: 36px 36px 76px 0px rgba(0, 0, 0, 0.26), 36px 36px 136px 0px #0b2b08;
  color: #fff;
  height: 640px;
  font-family: "proxima-nova-soft", sans-serif;
  font-weight: 500;
  left: 50%;
  opacity: 0;
  padding: 38px 46px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 400px;
}
.calorie-counter__title {
  color: #666;
  font-size: 18px;
  margin-bottom: 10px;
}
.calorie-counter__date {
  font-size: 22px;
  margin-bottom: 50px;
}

.chart svg {
  height: 100%;
  width: 100%;
}
.chart__background {
  fill: none;
  height: 100%;
  position: relative;
  stroke: #5a5a59;
  stroke-width: 20px;
  width: 100%;
}
.chart__foreground {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -.........完整代码请登录后点击上方下载按钮下载查看