CSS3网页背景色渐变鼠标悬停高亮效果

CSS3网页背景色渐变鼠标悬停高亮效果

html:

25个i标签，每个i标签代表一个竖条

<div class="back">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>

css：

*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: #2d2e2f;
overflow: hidden;
}
.back{
width: 100%;
height: 100%;
}
.back i{
width: 4%;
height: 100%;
float: left;
opacity: 0.7;
}
.back i:hover{
opacity: 1 !important;
}
.back i:acitve{
width: 100%;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.back i:nth-child(1){
background-color: #00000c;
}
.back i:nth-child(2){
background: linear-gradient(to bottom, #020111 85%, #191621 100%);
}
.back i:nth-child(3){
background: linear-gradient(to bottom, #020111 60%, #20202c 100%);
}
.back i:nth-child(4){
background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
}
.back i:nth-child(5){
background: linear-gradient(to bottom, #20202c 0%, #515175 100%);
}
.back i:nth-child(6){
background: linear-gradient(to bottom, #40405c 0%, #6f71aa 80%, #8a76ab 100%);
}
.back i:nth-child(7){
background: linear-gradient(to bottom, #4a4949 0%, #7072ab 50%, #cd82a0 100%);
}
.back i:nth-child(8){
background: linear-gradient(to bottom, #757abf 0%, #8583be 50%, #eab0d1 100%);
}
.back i:nth-child(9){
background: linear-gradient(to bottom, #82addb 0%,#ebb2b1 100%);
}
.back i:nth-child(10){
background: linear-gradient(to bottom, #94c5f8 1%, #a6e6ff 70%, #beb5ea 100%);
}
.back i:nth-child(11){
background: linear-gradient(to bottom, #b7eeff 0%,#94dfff 100%);
}
.back i:nth-child(12){
background: linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%);
}
.back i:nth-child(13){
background: linear-gradient(to bottom, #90dffe 0%,#38a3d1 100%);
}
.back i:nth-child(14){
background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%);
}
.back i:nth-child(15){
background: linear-gradient(to bottom, #2d91c2 0%,#1e528e 100%);
}
.back i:nth-child(16){
background: linear-gradient(to bottom, #2473ab 0%, #1e528e 70%, #5b7983 100%);
}
.back i:nth-child(17){
background: linear-gradient(to bottom, #1e528e 0%,#265889 50%, #9da671 100%);
}
.back i:nth-child(18){
background: linear-gradient(to bottom, #1e528e 0%, #728a7c 70%, #e9ce5d 100%);
}
.back i:nth-child(19){
background: linear-gradient(to bottom, #154277 0%, #576e71 30%, #e1c45e 70%, #e9ce5d 100%);
}
.back i:nth-child(20){
background: linear-gradient(to bottom, #163c52 0%, #4f4f47 30%, #c5752d 60%, #b7490f 80%, #e9ce5d 100%);
}
.back i:nth-child(21){
background: linear-gradient(to bottom, #071b26 0%, #071b26 30%, #8a3b12 80%, #240e03 100%);
}
.back i:nth-child(22){
background: linear-gradient(to bottom, #010a10 30%, #59230b 80%, #2f1107 100%);
}
.back i:nth-child(23){
background: linear-gradient(to bottom, #090401 50%, #4b1d06 100%);
}
.back i:nth-child(24){
background: linear-gradient(to bottom, #00000c 80%,#150800 100%);
}
.back i:nth-child(25){
background-color: #00000c;
}