团队冲刺第二阶段2

今天做了分类后的展示部分

　　用CSS改变单选框的样式，以展示图片。

程序可以识别文件夹或者是文件，文件夹的名字展示在下拉框位置。

下面是CSS文件内容：

ul {    
	padding: 0;
    margin: 0;

}

li {    
	list-style-type: none;

}

input[type='radio']{    
	width:1000px;
	display: none;
}

label {    
	cursor: pointer;
}
::-webkit-scrollbar {    
	display: none;
}


.swanky_wrapper {
	width: 100%;
    
	height: auto;
    
	overflow: hidden;
    
	border-radius: 4px;
   
	 background: #c0c0c0;
	
	 margin:60px auto;

	}

.swanky_wrapper label {   
padding: 25px;
    
float: left;
    
height: 72px;
    
border-bottom: 1px solid #293649;
    
position: relative;
    
width: 100%;
    
color: #eff4fa;
    
transition: text-indent 0.15s, height 0.3s;
   
 box-sizing: border-box;
}

 .swanky_wrapper label img {    
 margin-right: 10px;
   
  position: relative;
   
top: 2px;
  
}

.swanky_wrapper label span {    
	position: relative;
    width:100%;
	top: -3px;

}

.swanky_wrapper label:hover {    
	background: #c0c0c0;
   
	 border-bottom: 1px solid #2a394f;
    
	 text-indent: 4px;

}

.swanky_wrapper label:hover .bar {    
	width: 100%;

}

.swanky_wrapper label .bar {    
	width: 0px;
    
	transition: width 0.15s;
    
	height: 2px;
   
	position: absolute;
  
	display: block;
 
	background: #c0c0c0;
  
	bottom: 0;
    
	left: 0;

	}

	.swanky_wrapper label .lil_arrow {    
	width: 5px;
    
	height: 5px;
    
	transition: -webkit-transform 0.8s;
    
	transition: transform 0.8s;
    
	transition: transform 0.8s, -webkit-transform 0.8s;
    
	-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
	border-top: 2px solid white;
    
	border-right: 2px solid white;
    
	float: right;
   
	 position: relative;
    
	 top: 6px;
    
	 right: 2px;
    
	 -webkit-transform: rotate(45deg);
   
	  transform: rotate(45deg);

	}

	.swanky_wrapper__content {    
	position: absolute;
	display: none;
	overflow: hidden;
	left: 0;
	width: 100%;
	}
    .swanky_wrapper__content img{
    height: 99px;
    width: auto;
    }
    
	

  
    .swanky_wrapper__content .clear {   
    clear: both;
}

    input[type='radio']:checked + label .swanky_wrapper__content {    
    display: block;
    top: 68px;
    border-bottom: 1px solid #212e41;
}

    input[type='radio']:checked + label >.lil_arrow {    
    transition: -webkit-transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    border-top: 2px solid #14a3f9;
    border-right: 2px solid #14a3f9;
}
input[type='radio']:checked + label {   
	height: 325px;
    background: #c0c0c0;
    text-indent: 4px;
    transition-property: height;
    transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
       input[type='radio']:checked + label .bar {    
       width: 0;
}
input[type='radio']:checked + label li:nth-of-type(1) {   
	-webkit-animation: in 0.15s 0.575s forwards;
    animation: in 0.15s 0.575s forwards;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: in 0.15s 0.575s forwards;
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
	-webkit-animation: in 0.15s 0.7s forwards;
    animation: in 0.15s 0.7s forwards;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: in 0.15s 0.7s forwards;
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {    
	-webkit-animation: in 0.15s 0.825s forwards;
    animation: in 0.15s 0.825s forwards;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: in 0.15s 0.825s forwards;
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {    
	-webkit-animation: in 0.15s 0.95s forwards;
    animation: in 0.15s 0.95s forwards;
    -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: in 0.15s 0.95s forwards;
    -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@-webkit-keyframes in {    from {        
left: -100%;
        opacity: 0;
    }
    to {        
    left: 0;
        opacity: 1;
    }
}
@keyframes in {    from {        
left: -100%;
        opacity: 0;
    }
    to {        left: 0;
        opacity: 1;
    }
}