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

代码语言：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);
  -webkit-transition: stroke-dashoffset 1s ease-in;
  -moz-transition: stroke-dashoffset 1s ease-in;
  transition: stroke-dashoffset 1s ease-in;
  fill: none;
  height: 100%;
  left: 0;
  position: absolute;
  stroke-dasharray: 630px;
  stroke-dashoffset: 630px;
  stroke-linecap: round;
  stroke-width: 20px;
  stroke: #b6feb7;
  top: 0;
  width: 100%;
}
.chart__count {
  color: #999;
  font-size: 16px;
  position: relative;
}
.chart__count div {
  color: #fff;
  font-size: 22px;
}
.chart .chart__container {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}
.chart--calorie .chart__container {
  height: 220px;
  width: 220px;
}
.chart--calorie .chart__count {
  top: -135px;
}
.chart--protein, .chart--carbs {
  float: left;
  margin-bottom: 50px;
  text-align: left;
  width: 50%;
}
.chart--protein .chart__container, .chart--carbs .chart__container {
  height: 30px;
  width: 30px;
}
.chart--protein .chart__foreground, .chart--carbs .chart__foreground {
  stroke: #b1fff8;
}
.chart--protein .chart__count, .chart--carbs .chart__count {
  color: #999;
  display: inline-block;
  font-size: 14px;
  padding-left: 10px;
  position: relative;
  text-align: left;
  top: 2px;
  overflow: hidden;
}
.chart--protein .chart__count div, .chart--carbs .chart__count div {
  color: #fff;
  font-size: 14px;
}
.chart--carbs {
  float: none;
  overflow: hidden;
}
.chart--carbs .chart__foreground {
  stroke: #fec6a8;
}

.calorie__count {
  background-color: #b584ff;
  padding: 23px;
}
.calorie__count__consumed, .calorie__count__remaining {
  font-size: 16px;
}
.calorie__count__consumed span, .calorie__count__remaining span {
  display: block;
  font-size: 22px;
}
.calorie__count__consumed {
  overflow: hidden;
}
.calorie__count__remaining {
  background-color: #fff;
  box-shadow: 19px 19px 49px 0px rgba(0, 0, 0, 0.36);
  color: #4d4d4d;
  float: right;
  padding: 24px;
  position: relative;
  right: -15px;
  top: -35px;
  width: 60%;
}

@-webkit-keyframes load {
  from {
    -webkit-transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
@-moz-keyframes load {
  from {
    -moz-transform: translate3d(-50%, -40%, 0);
    opacity: 0;
  }
  to {
    -moz-transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
@keyframes load {
  from {
    -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);
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    opacity: 1;
  }
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="calorie-counter">
        <div class="calorie-counter__title">Summary</div>
        <!--  /.calorie-counter__title -->
        <div class="calorie-counter__date">Wednesday Jan 27, 2016</div>
        <!--  /.calorie-counter__date -->

        <div class="chart chart--calorie js-chart" data-goal="1700" data-count="550">
            <div class="chart__container">

                <svg class="chart__background" x="0px" y="0px" height="220px" viewBox="0 0 220 220">
				<g>
					<path d="M110,210c-55.1,0-100-44.9-100-100C10,54.9,54.9,10,110,10s100,44.9,100,100C210,165.1,165.1,210,110,210z" />
				</g>
			</svg>
                <!-- /.cchart__background -->

                <svg class="chart__foregroun.........完整代码请登录后点击上方下载按钮下载查看