css实现三维进度条效果代码-html代码-BFW代码库

代码语言：html
所属分类：进度条
代码描述：css实现三维进度条效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="no-js">

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

	<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    	
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body { font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; color: #444; background-color: #323232; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a {
	outline: none;
	color: #DF7932;
	text-decoration: none;
}

a:hover, a:focus {
	color: #333;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Header */
.codrops-header {
	padding: 2em 1em 4em;
	text-align: center;
}

.codrops-header h1 {
	margin: 0.5em 0 0;
	letter-spacing: -1px;
	font-size: 3em;
	line-height: 1;
}

.codrops-header h1 span {
	text-transform: uppercase;
	letter-spacing: 3px;
	display: block;
	padding: 2em 0 0;
	color: #BBBFCB;
	font-size: 0.285em;
}

/* Top Navigation Style */
.codrops-links {
	position: relative;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

.codrops-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	background: rgba(0,0,0,0.1);
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.codrops-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.codrops-icon span {
	display: none;
}

.codrops-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;

	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon--drop:before {
	content: "\e001";
}

.codrops-icon--prev:before {
	content: "\e004";
}

/* Demo links */
.codrops-demos {
	margin: 2em 0 0;
}

.codrops-demos a {
	display: inline-block;
	margin: 0 0.5em;
	font-weight: bold;
}

.codrops-demos a.current-demo {
	color: #333;
}

/* Content */
.content {
	padding: 3em 0;
}

/* Related demos */
.content--related {
	text-align: center;
	font-weight: bold;
}

.media-item {
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}

.media-item__img {
	max-width: 100%;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
	opacity: 1;
}

.media-item__title {
	margin: 0;
	padding: 0.5em;
	font-size: 1em;
}

@media screen and (max-width: 50em) {
	.codrops-header {
		padding: 3em 10% 4em;
	}
}

@media screen and (max-width: 40em) {
	.codrops-header h1 {
		font-size: 2.8em;
	}
}
/* line 22, ../scss/custom-bars.scss */
.flexy-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 4em 0;
}
/* line 29, ../scss/custom-bars.scss */
.flexy-grid .flexy-column {
  display: flex;
  flex: 1;
  justify-content: center;
  margin-bottom: 3em;
}
/* line 35, ../scss/custom-bars.scss */
.flexy-grid .flexy-column .flexy-item {
  flex: 1;
}
/* line 40, ../scss/custom-bars.scss */
.flexy-grid:nth-of-type(odd) {
  background-color: #D8DBE4;
}
/* line 43, ../scss/custom-bars.scss */
.flexy-grid input[type='checkbox'] {
  display: none;
}

/* line 48, ../scss/custom-bars.scss */
.value-label {
  position: relative;
  display: inline-block;
  margin: 4em 0 2.5em 0;
  font-size: 1em;
  font-weight: bold;
  line-height: 1em;
  padding: 1em;
  color: #fefefe;
  background-color: rgba(255, 105, 0, 0.6);
  border: 1px solid rgba(153, 153, 153, 0.2);
  border-radius: 0.25em;
  box-shadow: 0 0.1em 0.25em rgba(153, 153, 153, 0.6), inset 0 0.15em 0.05em rgba(254, 254, 254, 0.2);
}
/* line 61, ../scss/custom-bars.scss */
.value-label:hover {
  cursor: pointer;
}

/* line 66, ../scss/custom-bars.scss */
.fa,
.fa:before {
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
}

/* line 74, ../scss/custom-bars.scss */
.fa {
  margin: 0 .1em;
  transition: transform 0.25s ease-in-out;
  transform-origin: 50% 55%;
}

/* line 80, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .value-label {
  background: #444444;
  box-shadow: none;
}

/* line 86, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .flexy-column .bar[aria-valuenow] .percentage:before {
  width: 90%;
}

/* line 93, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .flexy-column .bar[aria-valuenow].heat-gradient .tooltip {
  background-color: #ec0071;
  border-bottom: 1px solid #d30065;
}
/* line 97, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .flexy-column .bar[aria-valuenow].heat-gradient .tooltip:after {
  border-bottom-color: #ec0071;
}
/* line 102, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .flexy-column .bar[aria-valuenow] .tooltip {
  left: 90%;
}
/* line 104, ../scss/custom-bars.scss */
input[type='checkbox']:checked ~ .flexy-column .bar[aria-valuenow] .tooltip:before {
  content: '90%';
}

/* line 110, ../scss/custom-bars.scss */
.dots-pattern .percentage:before {
  background: radial-gradient(rgba(254, 254, 254, 0.5) 10%, rgba(0, 0, 0, 0) 5%) 0 0, radial-gradient(rgba(254, 254, 254, 0.5) 10%, rgba(0, 0, 0, 0) 5%) 0.5em 0.5em;
  background-size: 1em 1em;
}

/* line 120, ../scss/custom-bars.scss */
.bar.heat-gradient .face-position.left {
  background-color: rgba(241, 196, 15, 0.8);
}
/* line 124, ../scss/custom-bars.scss */
.bar.heat-gradient .percentage:before {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ec545b+0,ec5799+100 */
  background-color: rgba(241, 196, 15, 0.8);
  /* Old browsers */
  background: -moz-linear-gradient(left, rgba(241, 196, 15, 0.8) 0%, rgba(236, 0, 113, 0.6) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(241, 196, 15, 0.8)), color-stop(100%, rgba(236, 0, 113, 0.6)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(241, 196, 15, 0.8) 0%, rgba(236, 0, 113, 0.6) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(241, 196, 15, 0.8) 0%, rgba(236, 0, 113, 0.6) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(241, 196, 15, 0.8) 0%, rgba(236, 0, 113, 0.6) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(241, 196, 15, 0.8) 0%, rgba(236, 0, 113, 0.6) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
  /* IE6-9 */
  background-size: 16em;
}
/* line 136, ../scss/custom-bars.scss */
.bar.heat-gradient .volume-lights.shine:before {
  box-shadow: -2em 1.6em 3em -1em rgba(241, 196, 15, 0.3), 2em 1.6em 3em -1em rgba(236, 0, 113, 0.3);
}
/* line 140, ../scss/custom-bars.scss */
.bar.heat-gradient[valuenow="100"] .face-position.right {
  background-color: rgba(236, 0, 113, 0.6);
}

/* line 146, ../scss/custom-bars.scss */
.bar.ruler .percentage:before {
  background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 1em 1em, 1.6em 2em, .8em 2em;
}

/* line 153, ../scss/custom-bars.scss */
.bar.ruler-2 .percentage:before {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.34) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.38) 0.8em, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.42) 0.8em, rgba(0, 0, 0, 0) 1px);
  background-size: 16em 1em;
  background-position: 1.6em 0, 3.2em 0, 4.8em 0, 6.4em 0, 8em 0, 9.6em 0, 11.2em 0, 12.8em 0, 14.4em 0;
}

/* line 167, ../scss/custom-bars.scss */
.bar.ruler-3 .percentage:before {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0.8em, rgba(0, 0, 0, 0) 1px);
  background-size: 1.6em 2em;
}

/* line 172, ../scss/custom-bars.scss */
.bar.move .bar-face.face-position.floor,
.bar.rotate .bar-face.face-position.floor {
  transition: all 0.5s ease-in-out;
}

/* line 176, ../scss/custom-bars.scss */
.bar.move:hover {
  transform: rotateX(60deg) translateZ(0.1em);
}
/* line 178, ../scss/custom-bars.scss */
.bar.move:hover .bar-face.face-position.floor.volume-lights {
  box-shadow: 0 -0.1em 1em rgba(0, 0, 0, 0.15), 0 0.35em 0.2em -8px rgba(0, 0, 0, 0.15), 0 -0.75em 1.75em rgba(254, 254, 254, 0.6);
}

/* line 185, ../scss/custom-bars.scss */
.bar.rotate.hover,
.bar.rotate:hover {
  transform: rotateX(60deg) rotate(90deg);
}
/* line 188, ../scss/custom-bars.scss */
.bar.rotate.hover .bar-face.face-position.floor.volume-lights,
.bar.rotate:hover .bar-face.face-position.floor.volume-lights {
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.3), 0.2em 0 0.1em -5px rgba(0, 0, 0, 0.3), -0.5em 0 1.75em rgba(254, 254, 254, 0.6);
}
/* line 193, ../scss/custom-bars.scss */
.bar.rotate.hover .bar-face.face-position.shine:before,
.bar.rotate:hover .bar-face.face-position.shine:before {
  box-shadow: none;
}

/* line 199, ../scss/custom-bars.scss */
.tooltip {
  font-size: .65em;
  font-weight: bold;
  margin: 1.85em 0 0 -.5em;
  display: inline-block;
  position: absolute;
  .........完整代码请登录后点击上方下载按钮下载查看