jquery+css简洁进度条操作代码

代码语言:html

所属分类:进度条

代码描述:jquery+css简洁进度条操作代码

代码标签: jquery css 简洁 进度条 操作 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        progress {
          display: block; /* default: inline-block */
          width: 300px;
          margin: 2em auto;
          padding: 4px;
          border: 0 none;
          background: #444;
          border-radius: 14px;
          box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
        }
        progress::-moz-progress-bar {
          border-radius: 12px;
          background: #FFF;
          box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3);
          
        }
        /* webkit */
        @media screen and (-webkit-min-device-pixel-ratio:0) {
          progress {
            height: 25px;
          }
        }
        progress::-webkit-progress-bar {
            background: transparent;
        }  
        progress::-webkit-progress-value {  
          border-radius: 12px;
          background: #FFF;
          box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 5px 0px rgba(0,0,0,0.3); 
        } 
        /* environnement styles */
        
        body {
        	background: #555;
        }
        
        h1 {
        	color: #eee;
        	font: 30px Helvetica, Arial, sans-serif;
        	text-shadow: 0px 1px black;
        	text-align: center;
        	margin-bottom: 50px;
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0