html5文件拖拽上传无插件效果
代码语言:html
所属分类:上传
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.css"> <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); html, body, * { box-sizing: border-box; font-size: 16px; } html, body { height: 100%; text-align: center; } body { padding: 2rem; background: #f8f8f8; } h2 { font-family: "Roboto", sans-serif; font-size: 26px; line-height: 1; color: #454cad; margin-bottom: 0; } p { font-family: "Roboto", sans-serif; font-size: 18px; color: #5f6982; } .uploader { display: block; clear: both; margin: 0 auto; width: 100%; max-width: 600px; } .uploader label { float: left; clear: both; width: 100%; padding: 2rem 1.5rem; text-align: center; background: #fff; border-radius: 7px; border: 3px solid #eee; -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .uploader label:hover { border-color: #454cad; } .uploader label.hover { border: 3px solid #454cad; box-shadow: inset 0 0 0 6px #eee; } .uploader label.hover #start i.fa { -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; } .uploader #start { float: left; clear: both; width: 100%; } .uploader #start.hidden { display: none; } .uploa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0