css3进度条

2020-01-27 14:16:55

字体：大中小

来源：转载

供稿：网友

[CSS3学习实例代码] css3不可反向的进度条，超形象有立体感觉的进度条，而且修饰成了圆角，看上去挺漂亮，CSS3代码，欢迎参考。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3进度条</title><style>		.meter { 			height: 20px;  			position: relative;			margin: 60px 0 20px 0; 			background: #555;			-moz-border-radius: 25px;			-webkit-border-radius: 25px;			border-radius: 25px;			padding: 10px;			-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);			-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);			box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);		}		.meter > span {			display: block;			height: 100%;			border-radius: 20px;			background-color: rgb(43,194,83);			background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(43,194,83)),color-stop(1, rgb(84,240,84)));			background-image: -moz-linear-gradient(center bottom,rgb(43,194,83) 37%,rgb(84,240,84) 69%);			box-shadow: 			  inset 0 2px 9px  rgba(255,255,255,0.3),			  inset 0 -2px 6px rgba(0,0,0,0.4);			position: relative;			overflow: hidden;			-webkit-animation: move .6s linear;		}		@-webkit-keyframes move {		    0% {width:0;}		    100% {width:45%;}		}	</style></head><body>	<div id="page-wrap">		<div class="meter">			<span style="width: 45%"></span>		</div>	</div></body></html>

上一篇：CSS3 圆形遮罩效果

下一篇：古典的HTML5钟表效果