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>

js实现飞机跑道动画特效相关推荐

html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示下载资源: 13 次下载资源下载积分: 20 积分 js代码 window.onload = ...
wow.js实现各种动画特效
下载地址 https://www.bootcdn.cn/wow/ 官方网站 https://www.delac.io/wow/ WOW.js用于设置用户滚动页面时触发各种CSS动画,WOW.js需和a ...
html js css倒计时,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...
html倒计时动画,js+css3倒计时动画特效
js代码 const nums = document.querySelectorAll('.nums span'); const counter = document.querySelector('. ...
android 漩涡动画,使用P5.js构造漩涡动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var ticker = void 0; var positions = void 0; var nrOfC ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
js放飞气球动画js特效
下载地址 js放飞气球动画特效,js气球飞走特效 dd:
可爱生动的js文字弹幕动画js特效
下载地址这是一款可爱生动的js文字弹幕动画特效,在文本框输入你想表达的文字,会显示在空中形成文字弹幕滚动效果. dd:
设计/前端关于AE动画/特效web实现的四种方法
1.通过动图/视频来实现如果你是设计师,并且熟练的运用Photoshop,那你一定对混合图层非常熟悉,他是实现两种图层消除颜色差值的一种快速实现方法,当然在web网页上也存在像Photoshop中的 ...

js实现飞机跑道动画特效

js实现飞机跑道动画特效相关推荐

最新文章

热门文章