css上傳圖片中等待不可點擊效果
阿新 • • 發佈：2018-07-03
spl web 分享圖片 pac ron tle animation abs code
<!DOCTYPE html> <html> <head> <title>上傳中</title> <style type="text/css"> .dong-hua { position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); color: #ffffff; font-size: 50px; } .dong-hua-chuan { text-align: center; font-size: 26px; margin-top: 330px; color: #ffffff; } .loader-05 { width: 1em; height: 1em; border: .2em solid transparent; border-top-color: currentcolor; border-radius: 50%; -webkit-animation: 1s loader-05 linear infinite; animation: 1s loader-05 linear infinite; position: relative; display: block; margin: 0 auto; margin-top: 15px; } .loader-05:before { content: ‘‘; display: block; width: inherit; height: inherit; position: absolute; top: -.2em; left: -.2em; border: .2em solid currentcolor; border-radius: 50%; opacity: .5; } @-webkit-keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> </head> <body> <div class="dong-hua"> <p class="dong-hua-chuan">上傳中</p > <div class="loader-05"> </div> </div> </body> </html>
//默認給.dong-hua加上display:none;屬性，源代碼中沒加，然後放入靜態頁中任意位置。點擊上傳按鈕時將display改為block，然後上傳結束
status返回200時將display改為none即可。
css上傳圖片中等待不可點擊效果