CSS进度样式

下载代码

html

css

分享到微信朋友圈

html

css

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;
  -webkit-font-smoothing: antialiased;
}
p {
  text-align:center;
}
button {
  border: 0;
  background: #FFF;
  width: 25px;
  margin: 0 10px;
  line-height: 23px;
  font-weight: bold;
  color: #555;
  border-radius: 4px;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.4), 0 2px 5px rgba(0,0,0,0.5);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg