css实现三维进度条效果代码
代码语言：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;
line-height: 1em;
height: 1em;
width: 1em;
left: 0;
background-color: #ff6db3;
color: #fefefe;
border-bottom: 1px solid #ff53a5;
box-shadow: 0 0.05em 0.1em -0.02em rgba(0, 0, 0, 0.4), 0 0.1em 0.6em rgba(0, 0, 0, 0.3);
transition: all 0.5s ease-out;
}
/* line 217, ../scss/custom-bars.scss */
.tooltip:after, .tooltip:before {
display: inline-block;
font-size: .25em;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
/* line 228, ../scss/custom-bars.scss */
.tooltip:after {
content: '';
height: 0;
width: 0;
margin: -.75em 0 0 1em;
border: 1em solid transparent;
border-bottom-color: #ff6db3;
border-top-width: 0;
transition: all 0.5s ease-out;
}
/* line 239, ../scss/custom-bars.scss */
.tooltip:before {
height: 100%;
text-align: center;
}
/* line 244, ../scss/custom-bars.scss */
.tooltip.pos-2 {
box-shadow: none;
margin-top: -.6em;
transform: rotateX(-90deg) translateY(-0.5em);
transform-origin: 50% 100%;
}
/* line 250, ../scss/custom-bars.scss */
.tooltip.pos-2:after {
margin: 3.75em 0 0 1em;
border-bottom-color: inherit;
border-bottom-width: 0;
border-top-width: 1em;
border-top-color: #ff6db3;
}
/* line 258, ../scss/custom-bars.scss */
.tooltip.pos-2 .shadow {
display: inline-block;
width: 20%;
height: .02em;
background-color: transparent;
position: absolute;
left: 40%;
bottom: 0;
box-shadow: 0 0.7em 0.05em black, 0 0.7em 0.3em black;
}
/* line 271, ../scss/custom-bars.scss */
.tooltip.white {
background-color: #fefefe;
border-bottom: 1px solid #e5e5e5;
color: #444444;
box-shadow: 0 0.08em 0.1em 0em rgba(0, 0, 0, 0.2), 0 0.1em 1.6em rgba(0, 0, 0, 0.2);
}
/* line 276, ../scss/custom-bars.scss */
.tooltip.white:after {
border-bottom-color: #fefefe;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='1'] .tooltip {
left: 1%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='1'] .tooltip:before {
content: "1%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='1'].heat-gradient .heat-gradient-tooltip {
background-color: #f0c20f;
border-bottom: 1px solid #d8af0e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='1'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0c20f;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='2'] .tooltip {
left: 2%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='2'] .tooltip:before {
content: "2%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='2'].heat-gradient .heat-gradient-tooltip {
background-color: #f0c010;
border-bottom: 1px solid #d9ad0e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='2'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0c010;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='3'] .tooltip {
left: 3%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='3'] .tooltip:before {
content: "3%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='3'].heat-gradient .heat-gradient-tooltip {
background-color: #f0be11;
border-bottom: 1px solid #daac0e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='3'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0be11;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='4'] .tooltip {
left: 4%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='4'] .tooltip:before {
content: "4%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='4'].heat-gradient .heat-gradient-tooltip {
background-color: #f0bc12;
border-bottom: 1px solid #dbab0e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='4'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0bc12;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='5'] .tooltip {
left: 5%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='5'] .tooltip:before {
content: "5%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='5'].heat-gradient .heat-gradient-tooltip {
background-color: #f0ba13;
border-bottom: 1px solid #dca90e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='5'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0ba13;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='6'] .tooltip {
left: 6%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='6'] .tooltip:before {
content: "6%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='6'].heat-gradient .heat-gradient-tooltip {
background-color: #f0b814;
border-bottom: 1px solid #dca80e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='6'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0b814;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='7'] .tooltip {
left: 7%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='7'] .tooltip:before {
content: "7%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='7'].heat-gradient .heat-gradient-tooltip {
background-color: #f0b615;
border-bottom: 1px solid #dda60e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='7'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0b615;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='8'] .tooltip {
left: 8%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='8'] .tooltip:before {
content: "8%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='8'].heat-gradient .heat-gradient-tooltip {
background-color: #f0b416;
border-bottom: 1px solid #dea50e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='8'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: #f0b416;
}
/* line 286, ../scss/custom-bars.scss */
.bar[aria-valuenow='9'] .tooltip {
left: 9%;
}
/* line 289, ../scss/custom-bars.scss */
.bar[aria-valuenow='9'] .tooltip:before {
content: "9%";
}
/* line 294, ../scss/custom-bars.scss */
.bar[aria-valuenow='9'].heat-gradient .heat-gradient-tooltip {
background-color: #f0b217;
border-bottom: 1px solid #dfa30e;
}
/* line 16, ../scss/custom-bars.scss */
.bar[aria-valuenow='9'].heat-gradient .heat-gradient-tooltip:after {
border-bottom-color: .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0