.webuploader-pick { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 5px 15px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; } .webuploader-pick-hover { background: #00a2d4; } .webuploader-dnd { width: 400px; height: 400px; border: 3px solid #ddd; } .webuploader-dnd-over { border-style: dashed; } .webuploader-container { position: relative; } .jumbotron { color: #fff; text-shadow: 1px 1px 1px #3b3262; margin-bottom: 0; } /*demo样式*/ .uploader-list { width: 100%; overflow: hidden; } .file-item { float: left; position: relative; margin: 0 20px 20px 0; padding: 4px; } .file-item .error { position: absolute; top: 4px; left: 4px; right: 4px; background: red; color: white; text-align: center; height: 20px; line-height: 23px; } .file-item .info { position: absolute; left: 4px; bottom: 4px; right: 4px; height: 20px; line-height: 20px; text-indent: 5px; background: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; z-index: 10; } .upload-state-done:after { content: "\f00c"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; position: absolute; bottom: 0; right: 4px; color: #4cae4c; z-index: 99; } .file-item .progress { position: absolute; right: 4px; bottom: 4px; height: 3px; left: 4px; height: 4px; overflow: hidden; z-index: 15; margin: 0; padding: 0; border-radius: 0; background: transparent; } .file-item .progress span { display: block; overflow: hidden; width: 0; height: 100%; background: #d14 url(../img/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0); } @-webkit-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @-moz-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } @keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; } } a.travis { position: relative; top: -4px; right: 15px; }