.file_list a{ display:block;padding:5px;margin:2px 1px;line-height:1.3em;height:2.6em;;border-radius:2px;word-wrap:break-word;word-break:break-all;border:1px solid grey;box-shadow:0px 1px 5px grey;overflow:hidden; }
.file_list li{ margin:7px 0 0 0;padding:0px; }
/文件列表添加数字序号/ .file_list{ text-align:left; counter-reset:section; margin:0; padding:5px 0 5px 0; } .file_list li{ counter-increment:section; } .file_list li:before{ content:"" counter(section) "."; background: grey; color: yellow; padding: 2px 4px; font:1.1em bold italic; border-radius:.8em; } /数字序号添加背景/ .file_list li:nth-child(-1n+9):before{ content:"0" counter(section) "."; }
/文件列表实现隔行换色/ .file_list>li:nth-of-type(odd) a{ background:#97CBFF; } /奇数行背景色/ .file_list>li:nth-of-type(even) a{ background:#F0F0F0; } /偶数行背景色/ .file_list>li>a:hover{ opacity:0.6;color:#000; } /鼠标悬浮在上的链接不透明度颜色/
.file_list>li>a:hover{ -webkit-animation-name: fontbulger; -webkit-animation-duration: 1s;/表示动画持续的时间/ -webkit-animation-iteration-count:3;/表示动画要重复几次/ -webkit-animation-direction: alternate;/表示动画的方向/ -webkit-animation-timing-function: ease-out;/表示动画使用的时间曲线/ -webkit-animation-delay: 5;/表示开始动画之前的延时/ }
@-webkit-keyframes fontbulger { 0% { -webkit-transform: translate(-50px, 0px); }/動畫位移開始位置/ 100% { -webkit-transform: translate(0px, 0px); }/動畫位移結束位置/ }
.file_list li span:before{content:".";color:black;} /文件扩展名前缀/
.file_list span{ color:black; font-weight:bolder;font-size:100%; float:right; padding:0 5px; position:relative;bottom:35px; /文件扩展名下移/ } /文件扩展名/