js实现飞机跑道动画特效

效果如图在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap飞机跑道进度条动画特效 - 站长素材</title>
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="progress">
		<div class="progress-bar" style="width: 55%; background:#005394;">
			<span>55%</span>
		</div>
	</div>

	<div class="progress">
		<div class="progress-bar" style="width: 100%; background:#d9534f;">
			<span>100%</span>
		</div>
	</div>

	<div class="progress">
		<div class="progress-bar" style="width: 40%; background:#f0ad4e;">
			<span>40%</span>
		</div>
	</div>
</div>
</body>
</html>

*{padding:0; margin:0;}

.container{
	margin: 0 auto;
	width: 60%;
	padding:20px;
}

.progress{
	margin-top: 50px;
	padding: 10px;
	background: grey;
	border-radius: 5px;
	height: 20px;
	
}
.progress::after{
	content:"";
	display: block;
	margin-top: 9px;
	width: 100%;
	border-top: dashed 3px white;
	
}
.progress .progress-bar {
	float: left;
	height: 100%;
	position: relative;
}
.progress .progress-bar span{
	display: block;
	width: 40px;
	height: 30px;
	background: #333;
	position: absolute;
	right: -40px;
	top: -50px;
	color: white;
	text-align:center;
	line-height: 30px;
	border-radius: 3px;
}
.progress .progress-bar span::before{
	position: absolute;
	font-family: fontawesome;
	content: "\f0d7";
	font-size: 24px;
	color: #333;
	top: 18px;
	right: 13px;
}
.progress .progress-bar span::after{
	position: absolute;
	font-family: fontawesome;
	content: "\f072";
	font-size: 48px;
	color: #333;
	transform: rotateZ(45deg);
	top: 47px;
	right: 5px;
	
}

<script>
	var span = document.getElementsByTagName("span");
	for (var i = 0; i < span.length; i++) {
		span[i].onmousedown = function(eve){
			var e = eve || event;
			var x = e.offsetX;
			var _this = this;
			this.parentNode.parentNode.onmousemove = function(eve){
				var e = eve || event;
				
				var l = e.pageX - x - this.offsetLeft;
				
				
				var maxL = _this.parentNode.parentNode.offsetWidth-_this.offsetWidth/2;
				
				l = l < 0 ? 0 : (l > maxL ? maxL : l);
				
				_this.innerHTML = parseInt((l / maxL)*100)+"%"
				
				_this.parentNode.style.width = l + "px";
				
				_this.style.left = l + "px";
			}
			this.parentNode.parentNode.onmouseup = function(eve){
				this.onmousemove = null;
			}
			return false;
		}
	}
</script>

来源：CSDN

作者：crazyFlex

链接：https://blog.csdn.net/crazyFlex/article/details/103646526

标签

css

动画