css延伸版,CSS3 可延伸的颜色带

CSS

语言：

CSSSCSS

确定

.wrap {

background: #0e1925;

bottom: 0;

height: 100%;

overflow: hidden;

position: absolute;

right: 0;

width: 100%;

}

.bar1 {

background: rgba(249, 68, 31, 0.25);

height: 82%;

}

.bar1:hover {

background: #f9441f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar2 {

background: rgba(249, 104, 31, 0.25);

height: 41%;

}

.bar2:hover {

background: #f9681f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar3 {

background: rgba(249, 140, 31, 0.25);

height: 39%;

}

.bar3:hover {

background: #f98c1f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar4 {

background: rgba(249, 177, 31, 0.25);

height: 4%;

}

.bar4:hover {

background: #f9b11f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar5 {

background: rgba(249, 213, 31, 0.25);

height: 44%;

}

.bar5:hover {

background: #f9d51f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar6 {

background: rgba(249, 249, 31, 0.25);

height: 43%;

}

.bar6:hover {

background: #f9f91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar7 {

background: rgba(213, 249, 31, 0.25);

height: 65%;

}

.bar7:hover {

background: #d5f91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar8 {

background: rgba(177, 249, 31, 0.25);

height: 37%;

}

.bar8:hover {

background: #b1f91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar9 {

background: rgba(140, 249, 31, 0.25);

height: 16%;

}

.bar9:hover {

background: #8cf91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar10 {

background: rgba(104, 249, 31, 0.25);

height: 60%;

}

.bar10:hover {

background: #68f91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar11 {

background: rgba(68, 249, 31, 0.25);

height: 34%;

}

.bar11:hover {

background: #44f91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar12 {

background: rgba(31, 249, 31, 0.25);

height: 88%;

}

.bar12:hover {

background: #1ff91f;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar13 {

background: rgba(31, 249, 68, 0.25);

height: 84%;

}

.bar13:hover {

background: #1ff944;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar14 {

background: rgba(31, 249, 104, 0.25);

height: 25%;

}

.bar14:hover {

background: #1ff968;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar15 {

background: rgba(31, 249, 140, 0.25);

height: 68%;

}

.bar15:hover {

background: #1ff98c;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar16 {

background: rgba(31, 249, 177, 0.25);

height: 69%;

}

.bar16:hover {

background: #1ff9b1;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar17 {

background: rgba(31, 249, 213, 0.25);

height: 81%;

}

.bar17:hover {

background: #1ff9d5;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar18 {

background: rgba(31, 249, 249, 0.25);

height: 76%;

}

.bar18:hover {

background: #1ff9f9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar19 {

background: rgba(31, 213, 249, 0.25);

height: 18%;

}

.bar19:hover {

background: #1fd5f9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar20 {

background: rgba(31, 177, 249, 0.25);

height: 51%;

}

.bar20:hover {

background: #1fb1f9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar21 {

background: rgba(31, 140, 249, 0.25);

height: 22%;

}

.bar21:hover {

background: #1f8cf9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar22 {

background: rgba(31, 104, 249, 0.25);

height: 8%;

}

.bar22:hover {

background: #1f68f9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar23 {

background: rgba(31, 68, 249, 0.25);

height: 25%;

}

.bar23:hover {

background: #1f44f9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar24 {

background: rgba(31, 31, 249, 0.25);

height: 26%;

}

.bar24:hover {

background: #1f1ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar25 {

background: rgba(68, 31, 249, 0.25);

height: 67%;

}

.bar25:hover {

background: #441ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar26 {

background: rgba(104, 31, 249, 0.25);

height: 95%;

}

.bar26:hover {

background: #681ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar27 {

background: rgba(140, 31, 249, 0.25);

height: 73%;

}

.bar27:hover {

background: #8c1ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar28 {

background: rgba(177, 31, 249, 0.25);

height: 68%;

}

.bar28:hover {

background: #b11ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar29 {

background: rgba(213, 31, 249, 0.25);

height: 52%;

}

.bar29:hover {

background: #d51ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar30 {

background: rgba(249, 31, 249, 0.25);

height: 71%;

}

.bar30:hover {

background: #f91ff9;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar31 {

background: rgba(249, 31, 213, 0.25);

height: 21%;

}

.bar31:hover {

background: #f91fd5;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar32 {

background: rgba(249, 31, 177, 0.25);

height: 33%;

}

.bar32:hover {

background: #f91fb1;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar33 {

background: rgba(249, 31, 140, 0.25);

height: 97%;

}

.bar33:hover {

background: #f91f8c;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar34 {

background: rgba(249, 31, 104, 0.25);

height: 96%;

}

.bar34:hover {

background: #f91f68;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar35 {

background: rgba(249, 31, 68, 0.25);

height: 5%;

}

.bar35:hover {

background: #f91f44;

height: 100%;

-webkit-transition: background 0.5s, height 0.5s;

transition: background 0.5s, height 0.5s;

}

.bar {

cursor: pointer;

display: inline-block;

vertical-align: bottom;

width: 2.85714%;

}