css进度条阴影动画

JAVA

65%

PYTHON

87%

J-Query

55%

Go

95%

源码

<div class="container">
	<div class="col-md-offset-3 col-md-6">
		<div class="progress green">
			<h3 class="progress-title">html5</h3>
			<div class="progress-bar" style="width:65%; background:#21da9a;">
				<div class="progress-value">65%</div>
			</div>
		</div>
		<div class="progress pink">
			<h3 class="progress-title">css3</h3>
			<div class="progress-bar" style="width:87%; background:#ff1170;">
				<div class="progress-value">87%</div>
			</div>
		</div>
		<div class="progress yellow">
			<h3 class="progress-title">J-Query</h3>
			<div class="progress-bar" style="width:55%; background:#ffa900;">
				<div class="progress-value">55%</div>
			</div>
		</div>
		<div class="progress blue">
			<h3 class="progress-title">php</h3>
			<div class="progress-bar" style="width:95%; background:#294bdc;">
				<div class="progress-value">95%</div>
			</div>
		</div>
	</div>
</div>

<style type="text/css">
	.container {
		padding: 2em;
		background: #dbc1af;
		
	}
	*, :after, :before {
	    box-sizing: border-box;
	}
	.progress {
		height: 7px;
		background: #e3e3e3;
		border-radius: 0;
		box-shadow: none;
		margin: 40px 0 80px;
		overflow: visible;
		position: relative;
	}

	.progress .progress-title {
		padding: 5px 10px;
		margin: 0;
		background: #393a3d;
		border-radius: 5px 0 0 5px;
		box-shadow: 0 7px 7px rgba(0, 0, 0, 0.4);
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		text-transform: uppercase;
		position: absolute;
		top: -13px;
		left: 0;
		z-index: 1;
	}

	.progress .progress-title:after {
		content: "";
		border-left: 17px solid #393a3d;
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
		position: absolute;
		top: 0;
		right: -17px;
	}

	.progress .progress-bar {
		box-shadow: none;
		border-radius: 0;
		position: relative;
		-webkit-animation: animate-positive 2s;
		animation: animate-positive 2s;
	}

	.progress .progress-bar:after {
		content: "";
		width: 20px;
		height: 20px;
		border-radius: 50%;
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.6);
		background: #fff;
		position: absolute;
		right: -5px;
		top: -6px;
	}

	.progress .progress-value {
		width: 45px;
		height: 30px;
		line-height: 30px;
		border-radius: 3px;
		background: #393a3d;
		box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
		font-size: 15px;
		font-weight: 700;
		color: #fff;
		text-align: center;
		position: absolute;
		bottom: 30px;
		right: -17px;
	}

	.progress .progress-value:after {
		content: "";
		border-top: 7px solid #393a3d;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		position: absolute;
		bottom: -7px;
		left: 35%;
	}

	.progress.green .progress-bar:after {
		border: 5px solid #21da9a;
	}

	.progress.pink .progress-bar:after {
		border: 5px solid #ff1170;
	}

	.progress.blue .progress-bar:after {
		border: 5px solid #294bdc;
	}

	.progress.yellow .progress-bar:after {
		border: 5px solid #ffa900;
	}

	@keyframes animate-positive {
		0% {
			width: 0;
		}
	}
</style>

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/33_1620